David Banks

Smoothly transitioning axes with D3

This post demonstrates how to smoothly transition D3 axes as an alternative to updating axes with new limits instantaneously.

Smoothly transitioning chart axes in response to data updates or user actions is a nice visual effect, compared to simply updating everything in the blink of an eye.

Say you have a D3 scale object, and a D3 axis object linked to that scale:

var yScale = d3.scale.linear()
	.range([200, 20])
	.domain([0, 10]);

var yAxis = d3.svg.axis()
	.orient("left")
	.scale(yScale);

Lets say you added your axis to your chart as such:

svg.append("g")
	.attr("id", "y-axis")
	.call(yAxis);

Then the standard way of changing the limits instantaneously is:

svg.select("#y-axis")
	.call(yAxis);

To smoothly animate the axis change, do this instead:

svg.select("#y-axis")
	.transition()
	.call(yAxis);

It really is so simple - isn't D3 great!?