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

Preview:

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));

All default configuration options.

const timeline = new TimelineChart(element, data, {
      intervalMinWidth: 8, // minimum width for an interval element
      tip: undefined,
      textTruncateThreshold: 30,
      enableLiveTimer: false,
      timerTickInterval: 1000,
      hideGroupLabels: false
  })

Changelog:

v1.3.0 (08/13/2018)

• Add hideGroupLabels option