block by emeeks 221c931a1cd8c040d8e7

d3.layout.timeline with procedurally generated data

Full Screen

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.

index.html

d3.layout.timeline.js