Search code examples
javascriptd3.jsvisualizationnvd3.jsgraph-visualization

Curving a line chart inside a curved arc

I am new to D3 and learning it. I am trying to build a curved line chart. That is i want to bend the line chart inside a half circle. It will be helpful if any one can tell me how to approach this in D3.

Something as shown in the link below: http://www.cs.toronto.edu/~jianzhao/snapshots/kronominer.jpg

Solution

  • This is very similar to drawing a line chart in Cartesian coordinates, but using D3's radial line function rather than the regular line function. Your line's x coordinate becomes the angle, and the y coordinate the radial distance.

    var line = d3.svg.line.radial()
    .radius(function(d){return r(d.y);})
    .angle(function(d){return theta(d.x);});

    This Fiddle shows a simple example with sample data.