Experiment 4 – using updates and transitions to enhance our visualization
For our next experiment, we will take all of our combined knowledge and add some smooth transitions to the map. Transitions are a fantastic way to add style and smoothness to data changes.
This experiment will, again, require us to start with example-3.html
. The complete experiment can be viewed at http://localhost:8080/chapter-4/example-5.html
.
If you remember, we leveraged the JavaScript setInterval
function to execute updates at a regular timed frequency. We will go back to this method now to assign a random number between 1 and 33 to our existing color
function. We will then leverage a D3 method to smoothly transition between the random color changes.
Right below the update section, add the following setInterval
block of code:
setInterval(function(){ mexico.transition().duration(500) .style('fill', function(d) { return color(Math.floor((Math.random() * 32) + 1)); }); }...