Published
Edited
Apr 4, 2019
Importers
3 stars
chart = {
function draw()
{
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2014-04-20', title: 'tooltip for <i>item</i> <b>1</b>'},
{id: 2, content: 'item 2', start: '2014-04-14', title: 'tooltip for item 2'},
{id: 3, content: 'item 3', start: '2014-04-18', title: 'tooltip for item 3'},
{id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19', title: 'tooltip for item 4'},
{id: 5, content: 'item 5', start: '2014-04-25', title: 'tooltip for item 5'},
{id: 6, content: 'item 6', start: '2014-04-27', type: 'point', title: 'tooltip for item 6'}
]);
// Configuration for the Timeline
var options = {
tooltip: {followMouse: true}
};
// clear any existing timelines in the container
d3.select("#visualization").selectAll(".vis-timeline").remove()
// Create a Timeline
var timeline = new vis.Timeline(container, items, options)
// some weird timing issue causes this to not be set which in turn causes zooming/panning to not work
timeline.initialDrawDone = true
// for some reason need to run this with the breakpoint below at least once to get panning and zooming to work
//debugger
d3.selectAll(".vis-timeline").style("visibility", "visible")
//var foo = d3.selectAll(".vis-timeline").style("visibility", "visible")
return timeline
}
return draw()
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
