d3.layout.timeline with procedurally generated data

An example of d3.layout.timeline that generates random bands of data (with s and e somewhere between 1 & 40) and updates the timeline with the new band of data. A new band is generated every 500ms until 100 bands are generated.

Bands placed earlier are made more transparent than bands placed later.

This uses the layout's extent function to set the extent to a fixed [1,40] so that it does not dramatically resize in width as more elements are added. It also uses the maxBandHeight set to 20 to keep the timeline from dramatically resizing in height. Notice that there is no corresponding minBandHeight since there is no way to know how many lanes will be necessary to represent the data. padding is also used to give a small gap between lanes.

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>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 ramp=d3.scale.linear().domain([0,100]).range([ "yellow" , "blue" ]);

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() {

timelineData = timelineData.map(function(m) {
    m.e += Math.random();
    return m;
  });
  
  rando = Math.floor(Math.random() * 40);
  rando2 = Math.floor(Math.random() * 20);
  timelineData.push({s: rando,
                     e: Math.min(40, rando + rando2),
                     c: ramp(Math.random() * 100)
                    });

timelineBands = timeline(timelineData);

d3.select("svg").selectAll("rect")
  .data(timelineBands)
  .enter()
  .append("rect")
  .attr("x", 50)
  .attr("y", 50)
  .style("fill", function(d) { return d.c; })
  .style("fill-opacity", 0);

var size = timelineBands.length;

d3.selectAll("rect")
  .transition()
  .duration(400)
  .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-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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js