A timeline component based on d3kit and labella.js
Introduction |
Demo |
API Reference
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.
```
npm install d3kit-timeline --save
or
``
bower install d3kit-timeline --save
If you have this dataset
`javascript`
var data = [
{time: new Date(1977, 4,25), episode: 4, name: 'A New Hope'},
{time: new Date(1980, 4,17), episode: 5, name: 'The Empire Strikes Back'},
{time: new Date(1984, 4,25), episode: 6, name: 'Return of the Jedi'},
{time: new Date(1999, 4,19), episode: 1, name: 'The Phantom Menace'},
{time: new Date(2002, 4,16), episode: 2, name: 'Attack of the Clones'},
{time: new Date(2005, 4,19), episode: 3, name: 'Revenge of the Sith'},
{time: new Date(2015,11,18), episode: 7, name: 'The Force Awakens'},
];
Here is how to create a timeline with labels on the right.
`javascript
var chart = new d3KitTimeline('#timeline', {
direction: 'right',
initialWidth: 400,
initialHeight: 250,
textFn: function(d){
return d.time.getFullYear() + ' - ' + d.name;
}
});
chart.data(data).resizeToFit();
`
For more detailed usage please refer to the API Reference.
##### Choice 1. Global
Adding this library via `` tag is the simplest way. By doing this, `d3KitTimeline` is available in the global scope.
`html`
##### Choice 2: AMD
If you use requirejs, this library support AMD out of the box.
`javascript`
require.config({
paths: {
d3: 'path/to/d3',
d3kit: 'path/to/d3Kit',
labella: 'path/to/labella',
'd3kit-timeline': 'path/to/d3kit-timeline'
}
});
require(['d3kit-timeline'], function(d3KitTimeline) {
// do something with d3KitTimeline
});
##### Choice 3: node.js / browserify
d3kit-timeline also supports usage in commonjs style.
`javascript``
var d3KitTimeline = require('d3kit-timeline');
Krist Wongsuphasawat / @kristw
Copyright 2015-2017 Krist Wongsuphasawat.
Licensed under the Apache License Version 2.0
[npm-image]: https://badge.fury.io/js/d3kit-timeline.svg
[npm-url]: https://npmjs.org/package/d3kit-timeline
[daviddm-image]: https://david-dm.org/kristw/d3kit-timeline.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/kristw/d3kit-timeline