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

//     });    
// }