Simple Scrollable Timeline Chart With D3.js – d3-timeline

Category: Chart & Graph , Javascript | February 23, 2016
Author: commodityvectors
Views Total: 4,260
Official Page: Go to website
Last Update: February 23, 2016
License: MIT

Preview:

Simple Scrollable Timeline Chart With D3.js – d3-timeline

Description:

d3-timeline is a pure JavaScript library for rendering a scrollable and scalable timeline chart using d3.js library.

How to use it:

Include the required style sheet on your webpage.

<link rel="stylesheet" href="dist/timeline-chart.css">

Include needed JavaScript libraries at the bottom of the webpage.

<script src="/path/to/d3.min.js"></script>
<script src="/path/to/d3-tip.min.js"></script>
<script src="dist/timeline-chart.js"></script>

Prepare your chart data as follows:

const data = [{
    label: 'Name',
    data: [{
        type: TimelineChart.TYPE.POINT,
        at: new Date([2015, 1, 1])
    }, {
        type: TimelineChart.TYPE.POINT,
        at: new Date([2015, 2, 1])
    }, {
        type: TimelineChart.TYPE.POINT,
        at: new Date([2015, 3, 1])
    }, {
        type: TimelineChart.TYPE.POINT,
        at: new Date([2015, 4, 1])
    }, {
        type: TimelineChart.TYPE.POINT,
        at: new Date([2015, 5, 1])
    }, {
        type: TimelineChart.TYPE.POINT,
        at: new Date([2015, 6, 1])
    }]
}, {
    label: 'Type',
    data: [{
        type: TimelineChart.TYPE.POINT,
        at: new Date([2015, 1, 11])
    }, {
        type: TimelineChart.TYPE.POINT,
        at: new Date([2015, 1, 15])
    }, {
        type: TimelineChart.TYPE.POINT,
        at: new Date([2015, 3, 10])
    }, {
        label: 'I\'m a label',
        type: TimelineChart.TYPE.INTERVAL,
        from: new Date([2015, 2, 1]),
        to: new Date([2015, 3, 1])
    }, {
        type: TimelineChart.TYPE.POINT,
        at: new Date([2015, 6, 1])
    }, {
        type: TimelineChart.TYPE.POINT,
        at: new Date([2015, 7, 1])
    }]
}, {
    label: 'Imp',
    data: [{
        label: 'Label 1',
        type: TimelineChart.TYPE.INTERVAL,
        from: new Date([2015, 1, 15]),
        to: new Date([2015, 3, 1])
    }, {
        label: 'Label 2',
        type: TimelineChart.TYPE.INTERVAL,
        from: new Date([2015, 4, 1]),
        to: new Date([2015, 5, 12])
    }]
}];

Create a container for the timeline chart.

<div id="chart"></div>

Render a timeline chart inside the container you just created.

const element = document.getElementById('chart');
const timeline = new TimelineChart(element, data, {
      tip: function(d) {
          return d.at || `${d.from}<br>${d.to}`;
      }
  }).onVizChange(e => console.log(e));