Introduction | Demo | API Reference
d3Kit-timeline
If you want to have a simple timeline that labels do not overlap, but too lazy to implement one from scratch, this library is for you. Below is a screenshot of four timelines of the same data, each can be created via ~10 lines of code. See demo.
The use case of this library is not limited to temporal data. You can change the scale to be d3.scale.linear() or something else to support x-value that is not time.
This small library is built on top of D3, d3Kit and Labella.js.
Note: If you are upgrading from v0.x.x to v1.x.x, this library now return the constructor d3KitTimeline
instead of d3Kit
. Please see the change logs for more detail.
Install
npm install d3kit-timeline --save
or
bower install d3kit-timeline --save
Example Usage
If you have this dataset
var data = time: 1977 425 episode: 4 name: 'A New Hope' time: 1980 417 episode: 5 name: 'The Empire Strikes Back' time: 1984 425 episode: 6 name: 'Return of the Jedi' time: 1999 419 episode: 1 name: 'The Phantom Menace' time: 2002 416 episode: 2 name: 'Attack of the Clones' time: 2005 419 episode: 3 name: 'Revenge of the Sith' time: 20151118 episode: 7 name: 'The Force Awakens';
Here is how to create a timeline with labels on the right.
var chart = '#timeline' direction: 'right' initialWidth: 400 initialHeight: 250 { return dtime + ' - ' + dname; }; chartdatadata;
For more detailed usage please refer to the API Reference.
Import to your project
Choice 1. Global
Adding this library via <script>
tag is the simplest way. By doing this, d3KitTimeline
is available in the global scope.
Choice 2: AMD
If you use requirejs, this library support AMD out of the box.
require;;
Choice 3: node.js / browserify
d3kit-timeline also supports usage in commonjs style.
var d3KitTimeline = ;
Author
Krist Wongsuphasawat / @kristw
Copyright 2015-2017 Krist Wongsuphasawat. Licensed under the Apache License Version 2.0