benfred/venn.js

var sets = [ {sets: ['A'], size: 12}, 
             {sets: ['B'], size: 12},
             {sets: ['A','B'], size: 2}];

var chart = venn.VennDiagram()
d3.select("#venn").datum(sets).call(chart);

var chart = venn.VennDiagram()
d3.select("#inverted").datum(sets).call(chart)
            
d3.selectAll("#inverted .venn-circle path")
    .style("fill-opacity", .8);

d3.selectAll("#inverted text").style("fill", "white");

// draw the initial diagram
var chart = venn.VennDiagram()
d3.select("#venn").datum(getSetIntersections()).call(chart);

// redraw the diagram on any change in input
d3.selectAll("input").on("change", function() {
    d3.select("#venn").datum(getSetIntersections()).call(chart);
});

d3.selectAll("#rings .venn-circle")
    .on("mouseover", function(d, i) {
        var node = d3.select(this).transition();
        node.select("path").style("fill-opacity", .2);
        node.select("text").style("font-weight", "100")
                           .style("font-size", "36px");
    })
    .on("mouseout", function(d, i) {
        var node = d3.select(this).transition();
        node.select("path").style("fill-opacity", 0);
        node.select("text").style("font-weight", "100")
                           .style("font-size", "24px");
    });

// draw venn diagram
var div = d3.select("#venn")
div.datum(sets).call(venn.VennDiagram());

// add a tooltip
var tooltip = d3.select("body").append("div")
    .attr("class", "venntooltip");

// add listeners to all the groups to display tooltip on mouseover
div.selectAll("g")
    .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(400).style("opacity", .9);
        tooltip.text(d.size + " users");
        
        // highlight the current path
        var selection = d3.select(this).transition("tooltip").duration(400);
        selection.select("path")
            .style("stroke-width", 3)
            .style("fill-opacity", d.sets.length == 1 ? .4 : .1)
            .style("stroke-opacity", 1);
    })

    .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(400).style("opacity", 0);
        var selection = d3.select(this).transition("tooltip").duration(400);
        selection.select("path")
            .style("stroke-width", 0)
            .style("fill-opacity", d.sets.length == 1 ? .25 : .0)
            .style("stroke-opacity", 0);
    });