Transitions

d3_transitions.html ● d3.min.js ● data/fruit_2.csv

About

Adding transitions is really easy, just update the following code section:

axis.transition().duration(1000).call(axisX)

diagram.selectAll("circle")
.transition().duration(1000)
.attr("cx",(d,i) => scaleX(d.weight))

Now, when you brush, the elements move slowly and comprehensibly to their new place:

But you can do even more stuff with transitions:

Easing

Easing means the type of transition, here different types are possible. Look at the examples.

More about transitions

• Introduction into transitions
  


• Transitions in the documentation
  


• Examples easing for transitions
  


• Examples in the documentation