Learn D3.js

Smooth transitions

Instead of immediately replacing one chart with another, you can add transitions, so that they occur in smooth animations. Adding a transition is very easy. You just need to call the transition() method on a selection before setting the new properties and styles. Instead of changing the old data with the new data, it will interpolate intermediate values during a quarter of a second. Add it to your update selections, and you will notice that when you change the chart, the bars and labels will animate to their new sizes, colors, and positions.

In our examples, transitions were added before changing the color and width of each bar, and before changing the position of each value label (see Updating/4-transitions.html):

svg.selectAll("g.entry").data(planets) ...