js/onload_d3.js

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

    });    
}