Learn D3.js

Radial axes

Radial axes are used in charts that display two dimensions with an angle and a radius. Examples are radar (radial line or area charts) or polar area charts. To create a radial chart, you can use any axis function and call it from a data selection, rotating the axis on its origin.

The following example creates a simple radial coordinate system with an axisBottom() axis, rotated twelve times (the size of its angular dataset):

const width  = 800, height = 600, margin = 150; // A radial scale with 12 angular axesconst angularData = d3.range(0,12,1);   // angular domainconst radialData  = d3.range(0,101,10); // radial domainconst scaleRadius = d3.scaleLinear()        .domain(d3.extent(radialData))        .range([0, width/2 - margin]);const axis = d3.axisBottom(scaleRadius) ...