Spaces:
Running
Running
File size: 4,250 Bytes
fd223ba |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
function(param) {
console.log("calling venn");
console.log(param);
var tokenizer1 = document.querySelector("#tokenizer1 input").value;
var tokenizer2 = document.querySelector("#tokenizer2 input").value;
console.log(tokenizer1);
console.log(tokenizer2);
console.log("calling onload_d3");
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
});
}
|