Simple d3.layout.timeline

A very simple example of d3.layout.timeline that takes a csv like this:

s,e
1,7
1,6
10,15
7,8
4,5
5,6

And places it into a few lanes to be drawn on-screen.

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

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)})

d3.csv("int_bands.csv", function (csv) {
  timelineBands = timeline(csv);

d3.select("svg").selectAll("rect")
  .data(timelineBands)
  .enter()
  .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", "#687a97")
  .style("stroke", "black")
})

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