# 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