How can I add a sublabel to a static venn.js chart?

Question

I was told about the Venn.js script on GitHub, which uses javascript to create Venn diagrams on an html page.

I have a basic script working, but I would like to add a sublabel in each set and intersection that shows its size

    function LoadVenn() {            
        // size values are variables filled by an $.ajax() function.
        // this is called in the $.ajax() success block.
        var sets = [
                    { sets: ['Less than Quarter'], size: ltq },
                    { sets: ['Quarter'], size: qtr },
                    { sets: ['Semester'], size: sem },
                    { sets: ['Year'], size: year },
                    { sets: ['Less than Quarter', 'Quarter'], size: ltqQtr },
                    { sets: ['Less than Quarter', 'Semester'], size: ltqSem },
                    { sets: ['Less than Quarter', 'Year'], size: ltqYear }
        ];

        // the chart is accurately created.
        var chart = venn.VennDiagram();
        d3.select("#venn").datum(sets).call(chart);

        // fill colors are good.
        d3.selectAll("#venn .venn-circle path").style("fill-opacity", 0.8);
        d3.selectAll("#venn text").style("fill", "white");

        // need to make label text larger
        // need to add sublabel showing set size
    }

I did find a sublabel example here, but it was for an endlessly cycling animation chart (which I didn't want).

How can I add a sublabel to a static and non-animated chart?

Answer 1

Based on the animated sublabels example and a sample code from here:

var sets = [
  {sets:["Information"], size: 12},
  {sets:["Overlap"], size: 12},
  {sets:["Circles"], size: 12},
  {sets: ["Information", "Overlap"], size: 4, label: "Redundancy"}
];
    
var chart = venn.VennDiagram()
    .wrap(false)
    .fontSize("16px")
    .width(640)
    .height(640);
    
function annotateSizes() {
    d3.select(this).select("text")
        .append("tspan")
        .text(function(d) { return "size " + d.size; })
        .attr("x", function() { return d3.select(this.parentNode).attr("x"); })
        .attr("dy", "1.5em")
        .style("fill", "#666")
        .style("font-size", "10px");
}     

function updateVenn(sets) {
    var div = d3.select("#venn").datum(sets);
    var layout = chart(div),
        textCentres = layout.textCentres;
    div.selectAll(".label").style("fill", "white");
    div.selectAll(".venn-circle path").style("fill-opacity", .6);

	div.selectAll("g").transition("venn").each("end", annotateSizes).duration(0);
        
    return layout;
}

updateVenn(sets);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://rawgit.com/benfred/venn.js/master/venn.js"></script>


<div id="venn"></div>