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.