Stacked Radial Area

This plot might be suitable for showing cyclical trends, though I'm not sure it’s a great idea as the radial display has a number of limitations:

The underlying data goes from Sunday to Saturday, but the chart shows continuity from Saturday through to the previous Sunday. Time does not flow backwards, so you might instead prefer to plot two values for Sunday; this would show a discontinuity on opposite sides of the Sunday axis.
Displaying the discontinuity requires an open interpolator, rather than cardinal-closed as used here. However, this causes the tangents of the incoming and outgoing lines to no longer be orthogonal to the axis. To display the discontinuity properly, you’d need to write a custom interpolator to generate the correct tangents.
Due to the interpolation taking place in Cartesian (rather than polar) coordinates, the intermediate values of the lines do not have the correct radial values: if you tried to measure the intermediate values using the radius, they would be wrong. The only way to fix this is to interpolate in polar coordinates, which requires plotting the intermediate values as Archimedian spirals. There is no native representation for spirals in SVG, so you must resample the spirals as piecewise Bézier curves. Needless to say, this is a fair amount of work, but it might be something D3 supports in the future.

Polar charts are pretty. But when in doubt, it’s probably best to stick to Cartesian coordinates.

forked from mbostock's block: Stacked Radial Area

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis line {
  stroke: #000;
}

.axis path {
  fill: none;
  stroke: #000;
}

.axis + .axis g text {
  display: none;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var formatDate = d3.time.format("%a"),
    formatDay = function(d) { return formatDate(new Date(2007, 0, d)); };

var width = 960,
    height = 500,
    outerRadius = height / 2 - 10,
    innerRadius = 120;

var angle = d3.scale.linear()
    .range([0, 2* Math.PI]);

var radius = d3.scale.linear()
    .range([innerRadius, outerRadius]);

var z = d3.scale.category20c();

var stack = d3.layout.stack()
    .offset("zero")
    .values(function(d) { return d.values; })
    .x(function(d, i) { return i; })
    .y(function(d, i) { return i; });

var nest = d3.nest()
    .key(function(d) { return d.key; });

var line = d3.svg.line.radial()
    .interpolate("cardinal-closed")
    .angle(function(d, i) { return angle(i); })
    .radius(function(d) { return radius(d.y0 + d.y); });

var x = d3.scale.linear()
    .domain([0, width])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, height])
    .range([height, 0]);  
  
var zoomer = d3.behavior.zoom()
                  .scaleExtent([0.1,10])
          //allow 10 times zoom in or out
                  .on("zoom", function(){
                    console.log("zoom", d3.event.scale)
                  })
          //define the event handler function
          // TODO: change for resize
                  .x(x)
                  .y(y);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
  		.call(zoomer);

svg.append("rect")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height);
   
d3.csv("data.csv", type, function(error, data) {
  if (error) throw error;

var layers = stack(nest.entries(data));
  console.log("layers", layers);

// Extend the domain slightly to match the range of [0, 2π].
  angle.domain([0, d3.max(data, function(d) { return d.time + 1; })]);
  radius.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

svg.selectAll(".layer")
      .data(layers)
    .enter().append("path")
      .attr("class", "layer")
      .attr("d", function(d) { return area(d.values); })
      .style("fill", function(d, i) { return z(i); });
  	
});

function type(d) {
  d.time = +d.time;
  d.value = +d.value;
  return d;
}

</script>

https://d3js.org/d3.v3.min.js