updating/modifying d3 word cloud with new data

Question

I'm trying to figure out how to modify and update from a selection of data with d3.js wordcloud.

Currently, I'm showing the top 10 results from a selection of data depending on indexed keys. I'd like to be able to switch this data depending on the keys, or if I want the top 10 or bottom 10 words.

here is a plnk so far;

http://plnkr.co/edit/cDTeGDaOoO5bXBZTHlhV?p=preview

I've been trying to refer to these guides, General Update Pattern, III and Animated d3 word cloud . However, I'm struggling to comprehend how to introduce a final update function, as almost all guides referring to this usually use a setTimeout to demonstrate how to update, and my brain just won't make the connection.

Any advice is most welcome!

Cheers,

(code here)

var width = 455;
var height = 310;
var fontScale = d3.scale.linear().range([0, 30]);
var fill = d3.scale.category20();

var svg = d3.select("#vis").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")")
    // .selectAll("text")

d3.json("data.json", function(error, data) {
    if (error) {
        console.log(error)
    }
    else {
        data = data
    }

    function sortObject(obj) {
        var newValue = [];
        var orgS = "MC";
        var dateS = "Jan";
        for (var question = 0; question < data.questions.length; question++) {
            var organization = data.organizations.indexOf(orgS);
            var date = data.dates.indexOf(dateS);
            newValue.push({
                label: data.questions[question],
                value: data.values[question][organization][date]
            });
        }
        newValue.sort(function(a, b) {
            return b.value - a.value;
        });
        newValue.splice(10, 50)
        return newValue;
    }
    var newValue = sortObject();


    fontScale.domain([
        d3.min(newValue, function(d) {
            return d.value
        }),
        d3.max(newValue, function(d) {
            return d.value
        }),
    ]);

    d3.layout.cloud().size([width, height])
        .words(newValue)
        .rotate(0)
        .text(function(d) {
            return d.label;
        })
        .font("Impact")
        .fontSize(function(d) {
            return fontScale(d.value)
        })
        .on("end", draw)
        .start();

    function draw(words) {
        var selectVis = svg.selectAll("text")
            .data(words)
        selectVis
            .enter().append("text")
            .style("font-size", function(d) {
                return fontScale(d.value)
            })
            .style("font-family", "Impact")
            .style("fill", function(d, i) {
                return fill(i);
            })
            .attr("text-anchor", "middle")
            .attr("transform", function(d) {
                return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
            })
            .text(function(d) {
                return d.label;
            })

        selectVis
            .transition()
            .duration(600)
            .style("font-size", function(d) {
                return fontScale(d.value)
            })
            .attr("transform", function(d) {
                return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
            })
            .style("fill-opacity", 1);

        selectVis.exit()
        .transition()
            .duration(200)
            .style('fill-opacity', 1e-6)
            .attr('font-size', 1)
            .remove();
    }
});

Answer 1

I did not see any update function within your code so I added that functionality in order to watch how the update works.

// Add a select elemnt to the page
var dropDown = d3.select("#drop")
    .append("select")
    .attr("name", "food-venues");
// Join with your venues
var foodVenues = data.organizations.map(function(d, i) {
    return d;
})
// Append the venues as options
var options = dropDown.selectAll("option")
    .data(foodVenues)
    .enter()
    .append("option")
    .text(function(d) {
        return d;
    })
    .attr("value", function(d) {
        return d;
    })
// On change call the update function
dropDown.on("change", update);

In order for a d3 word cloud to update correctly you need to calculate again the layout with the desired data

function update() {
  // Using your function and the value of the venue to filter data
  var filteredData = sortObject(data, this.value);
  // Calculate the new domain with the new values
  fontScale.domain([
    d3.min(newValue, function(d) {
      return d.value
    }),
    d3.max(newValue, function(d) {
      return d.value
    }),
  ]);
  // Calculate the layout with new values
  d3.layout.cloud()
    .size([width, height])
    .words(filteredData)
    .rotate(0)
    .text(function(d) {
      return d.label;
    })
    .font("Impact")
    .fontSize(function(d) {
      return fontScale(d.value)
    })
    .on("end", draw)
    .start();
}

I modified your sortObject function to receive an extra parameter which is the desired venue:

function sortObject(obj, venue) {
  var newValue = [];
  var orgS = venue || "MC";
  // ....
}

Here is the working plnkr: http://plnkr.co/edit/B20h2bNRkyTtfs4SxE0v?p=preview

You should be able to use this approach to update with your desired restrictions. You may be able to add a checkbox with a event listener that will trigger the update function.

In your html:

<input checked type="checkbox" id="top" value="true"> <label for="top">Show top words</label>

In your javascript:

var topCheckbox = d3.select('#top')
  .on("change", function() {
    console.log('update!')
  });