Transitions in charts

In this section, we will apply the knowledge of the discussed sections on animations and transitions to the charts that we designed in the previous chapters.

To create a basic enter animation for a bar chart—like the one that we can see in the following figure—we need to first create a transition for the position of each bar on the y axis and the height of each bar:

The bar chart

We want to animate from the position of the 0 value to the y value of the data point. Let's write this down as follows:

svg.select('.data')
  .selectAll('rect').data(data)
  .attr('r', 2.5)
  .attr('x', function(d) { return xScale(d.x) - barWidth*0.5; })
  .attr('width', function(d) { return barWidth; })
  .attr('y', yScale(0))
  .attr('height', 0)
  .transition()
  .attr('y', function(d) { return yScale(d.y); })
  .attr('height', function(d) { return yScale(0) - yScale(d.y); });

This is the most basic enter transition that we can think of because we are animating solely along the y axis with the...