Animating multiple elements

More elaborate data visualization requires animating multiple elements instead of a single element, as demonstrated in the previous recipe. More importantly, these transitions often need to be driven by data and coordinated with other elements within the same visualization. In this recipe, we will see how a data-driven multi-element transition can be created to generate a moving bar chart. New bars are added over time, while the chart shifts from right to left with a smooth transition.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter6/multi-element-transition.html

How to do it...

As expected, this recipe is slightly larger than the previous one, however, not by that much. Let's take a look at the following code:

<script type="text/javascript"> 
var id= 0, 
data = [], 
duration = 500, 
chartHeight = 100, 
chartWidth = 680; 
 
for...