Question

I am a novice while working on d3.js.

I wanted to know how can we Animate some data (eg. Change colors) with respect to time.

eg. Let’s say, in Monitoring app, I am projecting cluster data over US Map. Projection is done by drawing a circle and filling it by RED, GREEN or YELLOW color depending on it’s status.

When we start monitoring, ideally all circles will be filled with “GREEN” color and then over time color can change to “YELLOW” or “RED” depending on how cluster is behaving.

So if I need to play these color changes over time in some time window, how can it be done ?

If you can point me to any of the similar examples , that will help too ?

Thanks

Answer 1

Take a look at http://mbostock.github.com/d3/tutorial/bar-2.html. Basically you’ll need a redraw function that you’ll call whenever you want to update your chart. (Note: there is nothing special about the name of this function, you can call it whatever you want.)

You can use setInterval to create a basic timer, this is the rate that your chart will be updated.

setInterval(function() {
  redraw();  // call the function you created to update the chart
}, 1500);

Then you define redraw to update the chart data. This is a redraw function for a bar chart, but yours would be similar. You would just be adjusting the color based on the data instead of the y position and height.

function redraw() {
  // Update…
  chart.selectAll("rect")
      .data(data)
    .transition()
      .duration(1000)
      .attr("y", function(d) { return h - y(d.value) - .5; })
      .attr("height", function(d) { return y(d.value); }); 
}

Note that this is a simplified version, I recommend reading the page that I linked above for a more complete example.