Radial lines and radial area etc

First, go read about drawing lines, this is bascially the same thing but circley-er.

Radial lines

For a normal line, you’re concerned about the x and y of your data points. For a radial line, you need to think about it as angle and radius.

So when using the d3.radialLine generator, instead of x and y you will use angle and radius.

var line = d3.radialLine()
	.angle(function(d) {
		return angleScale(d.month);
	})
	.radius(function(d) {
		return radiusScale(d.sales);
	});

Radial area charts

If you know how a radial line works and you know how an area chart works, you’re 90% of the way to a radial area chart. It looks super neat but it’s basically the same thing!

Instead of a filled-in position on your y axis, though, you’re concerned with the inner and outer radius.

This code would fill in an area between the center of the circle (radius 0) and a high temperature

var area = d3.radialArea()
	.angle(function(d) {
		return angleScale(d.month);
	})
	.innerRadius(0);
	.outerRadius(function(d) {
		return radiusScale(d.high_temperature);
	});

You can also set the innerRadius with a function to have a moving lower bound, so you can color in the values between something like low and high temperatures.

var area = d3.radialArea()
	.angle(function(d) {
		return angleScale(d.month);
	})
	.innerRadius(function(d) {
		return radiusScale(d.low_temperature);
	});
	.outerRadius(function(d) {
		return radiusScale(d.high_temperature);
	});