Spaces:
Running
Running
| function() { | |
| import data from './test.json'; | |
| console.log(data); | |
| } | |
| $.getJSON("test.json", function(json) { | |
| console.log(json); // this will show the info it in firebug console | |
| }) | |
| // function render_venn() { | |
| // var tokenizer1 = document.querySelector("#tokenizer1 input").value | |
| // var tokenizer2 = document.querySelector("#tokenizer2 input").value | |
| // var sets = [ | |
| // {"sets": [0], "label": "Llama", "size": 100, "data":"7854"}, | |
| // {"sets": [1], "label": "GPT4o", "size": 100, "data":"8641"}, | |
| // {"sets": [0, 1], "label": "", "size": 20, "data":"45"}, | |
| // ]; | |
| // var svgContainer = d3.select("#venn").append("svg") | |
| // .attr("width",100) | |
| // .attr("height",100) | |
| // .attr("style", "margin:auto"); | |
| // var venngroup = svgContainer.append("g") | |
| // .attr("id", "venngroup"); | |
| // var chart = venn.VennDiagram() | |
| // .width(100) | |
| // .height(100 ) | |
| // .styled(false); | |
| // var div = d3.select("#venngroup") | |
| // div.datum(sets).call(chart); | |
| // var tooltip = d3.select("#tooltell").append("div") | |
| // .attr("class", "venntooltip"); | |
| // div.selectAll("path") | |
| // .style("stroke-opacity", 0) | |
| // .style("stroke", "rgba(22,22,22,1)") | |
| // .style("stroke-width", 2) | |
| // .style("transform-origin", "50% 50%"); | |
| // div.selectAll("g.venn-area") | |
| // .on("mouseover", function(d, i) { | |
| // // sort all the areas relative to the current item | |
| // venn.sortAreas(div, d); | |
| // // Display a tooltip with the current size | |
| // tooltip.transition().duration(300).style("opacity", 1); | |
| // tooltip.text(d.data); | |
| // // d3.select("#venn").selectAll("path").transition("filter").duration(250).style("filter", "grayscale(20%)").style("filter", ("filter", "url(#desaturate)"); | |
| // // var circleUnderMouse = this; | |
| // // d3.select("#venn").selectAll("path").transition("opacity").duration(250).style("opacity", function () {return (this === circleUnderMouse) ? 1.0 : 0.5;}); | |
| // // d3.select(this).selectAll("path").transition("opacity").duration(250).style("fill-opacity", 1); | |
| // // d3.select(this).raise(); | |
| // // highlight the current path | |
| // var selection = d3.select(this).transition("tooltip").duration(300); | |
| // selection.select("path") | |
| // .style("fill-opacity", 1) | |
| // .style("stroke-opacity", 1) | |
| // .style("transform", "scale(1.01,1.01)") | |
| // .style("transform-origin", "50% 50%"); | |
| // }) | |
| // // .on("mousemove", function() { | |
| // // tooltip.style("left", (d3.event.pageX) + "px") | |
| // // .style("top", (d3.event.pageY - 28) + "px"); | |
| // // }) | |
| // .on("mouseout", function(d, i) { | |
| // tooltip.transition().duration(500).style("opacity", 0); | |
| // var selection = d3.select(this).transition("tooltip").duration(400); | |
| // selection.select("path") | |
| // .style("fill-opacity", d.sets.length == 1 ? 1 : 1) | |
| // .style("stroke-opacity", 0) | |
| // .style("transform", "scale(1,1)") | |
| // .style("transform-origin", "50% 50%"); | |
| // // d3.select("#venn").selectAll("path").transition("opacity").duration(250).style("opacity", 1); | |
| // // d3.select(this).lower(); | |
| // }); | |
| // // | |
| // // var myLabel = svg.append('foreignObject') | |
| // // .attr({ | |
| // // height: 150, | |
| // // width: 100, // dimensions determined based on need | |
| // // transform: 'translate(0,0)' // put it where you want it... | |
| // // }) | |
| // // .html('<div class"style-me"><p>My label or other text</p></div>'); | |
| // // svg.append('filter') | |
| // // .attr('id','desaturate') | |
| // // .append('feColorMatrix') | |
| // // .attr('type','matrix') | |
| // // .attr('values',"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"); | |
| // var stuffToBeWrapped = d3.selectAll("svg"); | |
| // stuffToBeWrapped.each(function() { | |
| // d3.select( this.childNode ).insert("g", function(){return this;} ) | |
| // //insert a new <g> element immediately before this element | |
| // .attr("class", "wrapper") //set anything you want to on the <g> | |
| // .append( function(){return this;} ); | |
| // //move the content element into the group | |
| // }); | |
| // } | |