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('
My label or other text