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?

Can you post a fiddle of what you have? Why don't you just use the code in the example? It is just an infinite cycle run by `setInterval();` — Yuri, Mar 23 '16 at 15:07
I just set up a new fiddle account so I could post it there. However, there there is no URI for the external resources I need, so I have to figure out how to do that now. — , Mar 23 '16 at 15:19
Use those in the example you posted https://jsfiddle.net/cdt130v3/ — Yuri, Mar 23 '16 at 15:22
I tried the link you just posted, but even script copied straight from the venn.js site (like simple.html) isn't responding. Not sure. And as for "why didn't i just use the code in the [sublabel] example, I actually tried to extract code from it, just to add the sublabel text. No browser errors, but no chart rendered at all. — , Mar 23 '16 at 15:35
I'm trying a different approach. I'm using the Chrome "inspect" to identify the specific elements in the SVG and use jQuery to append the text that way. It might be simpler (for me). — , Mar 23 '16 at 15:56

score 2 · Accepted Answer · answered Mar 23 '16 at 16:06

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>

Aha! So this was the magic key I was missing when trying append the text labels in a different approach.. `d3.select(this).select("text").append("tspan")` — , Mar 23 '16 at 16:14

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

1 Answers1