how to make smooth transitions with d3 + socket.io

Question

I have a d3.js treemap that is getting pinged every time the server emits an update. The updates are coming off the twitter stream; there are many updates. The treemap is thus very jerky in its animations because it has already updated multiple times before the 1500 ms transition can finish.

Is it possible to separate the code which updates node values from the code which updates the view? I hope to find a solution that will update the values of the treemap continuously, but only update the view every 1500 - 2000ms.

Please see my full d3 script :

var socket = io.connect();

var margin = {top: 40, right: 10, bottom: 10, left: 10},
    width = 1000 - margin.left - margin.right,
    height = 650 - margin.top - margin.bottom;

var color = d3.scale.category20c();

var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(false)
    .value(function(d) { return d.size; });

var div = d3.select("body").append("div")
    .style("position", "relative")
    .style("width", (width + margin.left + margin.right) + "px")
    .style("height", (height + margin.top + margin.bottom) + "px")
    .style("left", margin.left + "px")
    .style("top", margin.top + "px");

var root;

socket.on('update', function(stream) {
  console.log('tweets')

  div.datum(root).selectAll(".node").remove();

  root = stream.masterlist;

  var node = div.datum(root).selectAll(".node")
      .data(treemap.nodes)
    .enter().append("div")
      .attr("class", "node")
      .call(position)
      .style("background", function(d) { return d.children ? color(d.name) : null; })
      .text(function(d) { return d.children ? null : d.name; });

  d3.selectAll("input").on("change", function change() {
    var value = this.value === "count"
        ? function() { return 1; }
        : function(d) { return d.size; };

    node
        .data(treemap.value(value).nodes)
      .transition()
        .duration(1500)
        .call(position);
  });
});

function position() {
  this.style("left", function(d) { return d.x + "px"; })
      .style("top", function(d) { return d.y + "px"; })
      .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
      .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}

This code was taken from the treemap example on the excellent bl.ocks.org website, with minor changes (my data comes from a callback rather than a json). I have tried to split value logic from view logic with a setInterval() outside of socket.on() , but my attempts either fail to slow down transitions or they break the treemap completely.

  d3.selectAll("input").on("change", function change() {
    var value = this.value === "count"
        ? function() { return 1; }
        : function(d) { return d.size; };

  });
}); // end socket.on();

setInterval(function() {
  node
      .data(treemap.value(value).nodes)
    .transition()
      .duration(1500)
      .call(position);
  }, 2000);

Many thanks for any insight!

Answer 1

What you are wanting to do is called debounce. There are several javascript libraries that have one you could use (I use underscore). You could also write one yourself. I found this one in a blog post :

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
} 

Once you have a debounce function that you implemented or stole, the rest is easy: you just wrap the function that handles you on update with debounce:

socket.on('update', debounce(function(stream) {
  console.log('tweets')
  ...
}));