An example of d3.layout.timeline that takes advantage of d3.svg.arc and a radial scale to draw timelines in a radial manner.
xxxxxxxxxx<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><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8" type="text/javascript"></script><script src="d3.layout.timeline.js" charset="utf-8" type="text/javascript"></script><script>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