A layout for band-style timelines
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit 175e314 Sep 21, 2017
Permalink
Failed to load latest commit information.
examples Update to v4 Sep 21, 2017
src Update to v4 Sep 21, 2017
.gitignore Update to v4 Sep 21, 2017
LICENSE Initial commit Sep 11, 2015
README.md Hierarchical Support Sep 23, 2015
d3.timeline.js Update to v4 Sep 21, 2017
index.js Update to v4 Sep 21, 2017
package.json Update to v4 Sep 21, 2017
timeline.png Init commit Sep 12, 2015

README.md

d3.layout.timeline

Timelines come in all shapes and sizes. One of the most common and popular is the kind that represents the duration of events as bands and tries to efficiently pack them into discrete lanes (sometimes called a swimlane chart). This layout takes an array of data with start and end points and creates the data necessary to draw the data as bands on a timeline.

d3.layout.timeline

npm install d3-layout-timeline

Simple example using integers for start and end

Example showing padding, maximum band height and fixed extent

Example with dates

Example with dates, categorized to create parallel semantically meaningful timelines

Example with hierarchical data

#timeline(data) Returns an array of objects based on data with drawing instructions.

#timeline.size Sets or gets an array of [width, height] that is used to calculate the location of the timeline bands along with their start position (d.start), y-position (d.y) height (d.dy) and end (d.end). Width can be calculated by subtracting start from end for svg:rect elements.

#timeline.dateFormat Sets or gets the function that returns the values for the start and end of the bands. Defaults to function (d) {return new Date(d)}. The timeline layout can plot floats and ints for relative time (see the simple example that uses integer positions for start and end points).

#timeline.bandStart Sets or gets the function that returns the start of the band. Remember that it will also be passed through #timeline.dateFormat. Defaults to function (d) {return d.start}.

#timeline.bandEnd Sets or gets the function that returns the start of the band. Remember that it will also be passed through #timeline.dateFormat. Defaults to function (d) {return d.end}. If you want to use duration-based notation, you might try something like function (d) {return d.start + d.duration}.

#timeline.extent Sets or gets extent of the timeline. By default, the extent is set to the minimum start and maximum end, but if you have a range you'd rather set the timeline to, you can do so. This is also passed through #timeline.dateFormat.

#timeline.padding Sets or gets the distance in pixels between lanes. Defaults to 0.

#timeline.maxBandHeight Sets or gets the maximum band height. Defaults to Infinity (bands will fill the given height in the #timeline.size array minus any necessary padding).

#timeline.children Sets or gets the children accessor, for use with hierarchical timeline data. Typically children are stored in an array in .children or .values. Set to return null or false to disable hierarchical support. Hierarchical data can be a hierarchical JSON object (like the ubiquitous flare.json dataset) or an array of objects with each having child elements.

If you're looking for a more sophisticated method of visualizing temporal data, you can check out Topotime.