Radial Timeline

An example of d3.layout.timeline that takes advantage of d3.svg.arc and a radial scale to draw timelines in a radial manner.

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>Radial Timeline with Procedurally Generated Data</title>
  <meta charset="utf-8" />
    <style type="text/css">
      svg {
        height: 1100px;
        width: 1100px;
      }
      div.viz {
        height: 1000px;
        width: 1000px;
      }
      </style>
</head>

var timelineData = [];

var timeline = d3.layout.timeline()
  .size([1000,300])
  .bandStart(function (d) {return d.s})
  .bandEnd(function (d) {return d.e})
  .dateFormat(function (d) {return parseInt(d)})
  .padding(5)
  .extent([0,40])
  .maxBandHeight(20);

addData()

function addData() {

var arc = d3.svg.arc();

rando = Math.floor(Math.random() * 40);
  rando2 = Math.floor(Math.random() * 20);
  timelineData.push({s: rando, e: Math.min(40, rando + rando2)});

timelineBands = timeline(timelineData);

angleScale = d3.scale.linear().domain([0,1000]).range([0,(2 * Math.PI)]);

timelineBands.forEach(function (d) {
    d.startAngle = angleScale(d.start);
    d.endAngle = angleScale(d.end);
    d.y = d.y + 50;

})

d3.select("svg").selectAll("path")
  .data(timelineBands)
  .enter()
  .append("path")
  .attr("transform", "translate(500,250)")
  .style("fill-opacity", 0)
  .attr("d", function (d) {return arc.innerRadius(10).outerRadius(d.dy + 10)(d)})

var size = timelineBands.length;

d3.selectAll("path")
  .transition()
  .duration(400)
  .attr("d", function (d) {return arc.innerRadius(d.y).outerRadius(d.y + d.dy)(d)})
  .attr("x", function (d) {return d.start})
  .attr("y", function (d) {return d.y})
  .attr("height", function (d) {return d.dy})
  .attr("width", function (d) {return d.end - d.start})
  .style("fill", "#b0909d")
  .style("fill-opacity", function (d, i) {return Math.max(0.05, 1 - ((size - i) * .01))});

if (size < 100)
  {
    setTimeout(addData, 500);
  }

}

</script>
<body>
<div id="viz">
  <svg style="background:white;" height=1100 width=1100>
  </svg>
</div>
<footer>
</footer>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js