d3.layout.timeline categorized timelines

An example of d3.layout.timeline that shows wars the United States has been involved in during its first 100 years (from Wikipedia). Events have been categorized and rendered in separate lanes for colonial wars, native wars, internal wars, wars involving European powers, and wars in Latin America.

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

types = ["European","Native","Colonial","Latin America","Internal"];

colorScale = d3.scale.ordinal()
  .domain(types)
  .range(["#96abb1", "#313746", "#b0909d", "#687a97", "#292014"]);

d3.csv("wars.csv", function (csv) {
  var timeline = d3.layout.timeline()
    .size([500,80])
    .extent(["7/4/1776", "12/31/1876"])
    .padding(3)
    .maxBandHeight(20);

types.forEach(function (type, i) {
  onlyThisType = csv.filter(function(d) {return d.sphere === type});

theseBands = timeline(onlyThisType);

d3.select("svg").append("g")
  .attr("transform", "translate(100," + (35 + (i * 90)) + ")")
  .selectAll("rect")
  .data(theseBands)
  .enter()
  .append("rect")
  .attr("rx", 2)
  .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);

d3.select("svg").append("text")
  .text(type)
  .attr("y", 50 + (i * 90))
  .attr("x", 20)

})

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