D3 - Multiple wordclouds from the same source file

Question

I'm having some trouble trying to create multiple wordclouds from a single source json using d3.

Edit: Forgot to mention, I'm basing the wordclouds on Jason Davies example, here.

There are various guides for creating small multiples from the same file, but I can't find anything which involves using a layout model for each chart, as is the case for the word-cloud layout.

I want to make a separate wordcloud for each item in the 'results' object:

sourcedata = {
    "results":
    [
        {
            "category":"spain", 
            "words":[["i", 190], ["the", 189], ["it", 139], ["you", 134], ["to", 133], ["a", 131]]
        },
        {
            "category":"england", 
            "words":[["lol", 37], ["on", 36], ["can", 35], ["do", 35], ["was", 33], ["mike", 33], ["but", 31], ["get", 30], ["like", 30]]
        },
        {
            "category":"france", 
            "words":[["ve", 18], ["make", 18], ["nick", 18], ["soph", 18], ["got", 18], ["he", 17], ["work", 17]]
        },
        {
            "category":"germany", 
            "words":[["about", 13], ["by", 13], ["out", 13], ["probabl", 13], ["how", 13], ["video", 12], ["an", 12]]
        }
    ]
}

Since each wordcloud needs it's own layout model, I'm trying to use a forEach loop to go through each category, creating a model and 'draw' callback method for each one:

d3.json(sourcedata, function(error, data) {
    if (error) return console.warn(error);

    data = data.results;

    var number_of_charts = data.length;
    var chart_margin = 10;
    var total_width = 800;
    var chart_width_plus_two_margin = total_width/number_of_charts;
    var chart_width = chart_width_plus_two_margin - (2 * chart_margin);

    data.forEach(function(category) {

        svg = d3.select("body")
            .append("svg")
            .attr("id", category.name)
            .attr("width", (chart_width + (chart_margin * 2)))
            .attr("height", (chart_width + (chart_margin * 2)))
            .append("g")
            .attr("transform", "translate(" + ((chart_width/2) + chart_margin) + "," + ((chart_width/2) + chart_margin) + ")");

        d3.layout.cloud().size([chart_width, chart_width])
            .words(category.words.map(function(d) {
                return {text: d[0], size: 10 + (d[1] / 10)};
            })) 
            .padding(5)
            .rotate(function() { return ~~(Math.random() * 2) * 90; })
            .font("Impact")
            .fontSize(function(d) { return 10 + (d[1] * 10); })
            .on("end", drawInner)
            .start();

        function drawInner(words) {
            svg.selectAll("text").data(words)
            .enter().append("text")
            .style("font-size", function(d,i) { return d.size + "px"; })
            .style("font-family", "Impact")
            .style("fill", function(d, i) { return fill(i); })
            .attr("text-anchor", "middle")
            .attr("transform", function(d) {
              return "translate(" + [d.x+(chart_width/2), d.y+(chart_width/2)] + ")rotate(" + d.rotate + ")";
            })
            .text(function(d) { return d.text; });
        }

    });

});

However, when I run this, I get one set of svg/g tags per category, but each one only contains a single text tag, with just one of the words from that category, and a size of 0.

Any help much appreciated, thanks!

Edit: See my own reply for fixed code. Thanks to Mark.

Mark · Accepted Answer

Stared at this for too long. The problem is this line:

.fontSize(function(d) { return 10 + (d[1] * 10); })

The d here is constructed object from the layout, not your array entry. This fails silently.

Substitute it with:

.fontSize(function(d) { return d.size; })

Also, check your translate math. It seems to be shifting the g elements out of the svg.

Example here.

Another potential pitfall is that since the drawInner is a callback it appears to be called in an async fashion. Because of this you have a potential for the svg variable to be overwritten with multiple calls to drawInner. I would consider moving the svg creation to inside the call back. One way to do this is:

...
.on("end", function(d, i) {
    drawInner(d, category.category);
  })
  .start();

function drawInner(words, name) {

  svg = d3.select("body")
  .append("svg")
  .attr("id", name)
...

So that you can still pass in the category name.

Updated example.

D3 - Multiple wordclouds from the same source file

Answers (2)

Related Questions