Hierarchical Timeline Visualization

Experimental support for nested timelines in d3.layout.timeline. Positions and sizes nested timelines inside parents and derives the parent start and end date from the min and max start and end dates of the children.

This is not currently supported in the published version.

Hover over bands to see labels.

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

var colors = d3.scale.ordinal().range(["#f5e0b7", "#5b1e37", "#b9e3c5", "#827abf", "#f62150", "#6f89b6"]);

var timeline = d3.layout.timeline()
  .size([1000,400])
  .dateFormat(function (d) {return d})
  .childAccessor(function (d) {return d.children})
  .padding(1);

colorScale = d3.scale.ordinal()
  .domain(["European","Native","Colonial","Latin America","Internal"])
  .range(["#96abb1", "#313746", "#b0909d", "#687a97", "#292014"]);

d3.json("art_movements.json", function (json) {
  timelineBands = timeline(json.children);

d3.select("svg").selectAll("g")
  .data(timelineBands)
  .enter()
  .append("g")
  .attr("class", "band")
  .on("mouseover", function (d) {d3.selectAll("text").style("opacity", function (p) {return p.label === d.label ? 1 : 0})})
  .on("mouseout", function (d) {d3.selectAll("text").style("opacity", 0)})

d3.selectAll("g.band")
  .append("rect")
  .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", function (d) {return colorScale(d.sphere)})
  .style("stroke", "black")
  .style("stroke-width", 1)
  .style("opacity", 0.5)
  .style("fill", function (d) {return colors(d.level)})

d3.select("svg")
  .selectAll("text")
  .data(timelineBands)
  .enter()
  .append("text")
  .attr("x", function (d) {return (d.start + d.end) / 2})
  .attr("y", function (d) {return d.y + (d.dy / 2)})
  .text(function(d) {return d.label})
  .style("opacity", 0)
  .style("pointer-events", "none")
  .style("text-anchor", "middle")
  .style("font-size", function (d) {return (d.dy / d.label.length) * 4})

})

</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