Transitions

D3's selection.transition method makes it easy to animate transitions when changing the DOM. And it's very, very simple!

Say for example you want to change the color of a rectangle to red. You would normally do

d3.select("rect").style("color", "red")

To instead animate the change over time, derive a transition:

d3.select("rect").transition().style("color", "red")

Add transition to bars

d3.select("p")
  .on("click", function() {
    data = random(4)
    d3.select('svg')
      .selectAll("rect")
      .data(data)
      .transition()      // Just this single magical line
      .attr('width', function(d) {return d})

    d3.select('svg')
      .selectAll("text")
      .data(data)
      .transition()      // Just this single magical line
      .text(function(d) {return d})
      .attr('x', function(d) {return d-20})
  })

Add duration

You can control attribute change interpolation over time by setting duration

  .transition()
  .duration(1000)  // in milliseconds

Add Easing

Easing is a method of distorting time to control apparent motion in animation.

  .transition()
  .duration(1000)  // in milliseconds
  .ease("linear")   // among cubic, poly, sin, bounce, elastic

or bounce them up.

  .transition()
  .duration(1000)
  .ease("bounce")

Add Delay

also, you could delay the transition after the event, using .delay()

  .transition()
  .duration(1000)
  .delay(400)