From bar charts to scatter plot

Using D3 transitions

This is a chart that shows how to transition a SVG rectangle into a circle. The data shows the median salary for women and men in several industries in the USA. Click on the buttons to show a bar chart for women’s median salary, for men’s median salary or a scatter plot comparing women’s and men’s median salary.

The transition of the rectangle into a circle (and vice versa) is very simple. The traditional way for doing this would be drawing both rectangles and circles as a <path> element.

Instead of that, here the transition between rectangles and circles uses only rectangles: to turn the rectangle into a circle one just needs changing the rectangles’ "rx" and "ry" properties:

	var radiusScale = d3.scaleSqrt()
		.domain([0, d3.max(data, function(d){ return d.workers; })])
		.range([0, 50]);

	data.forEach(function(d){ d.radius = radiusScale(d.workers); });

	bars.attr("rx", function(d){ return d.radius / 2; })
		.attr("ry", function(d){ return d.radius / 2; })

Source of the data: What Is the Gender Pay Gap? Don't take the data too seriously, as I didn’t check the accuracy of it.