2e:null 2f:["$","title",null,{"children":"Building an Interactive Timeline with Vis.js | Aaron Kyle Dennis | Observable"}] 34:T559,chart = { // create a data set var data = new vis.DataSet([ { id: 1, start: new Date((new Date()).getTime() - 60 * 1000), end: new Date(), content: 'Dynamic event' } ]); // specify options var options = { showCurrentTime: true, showCustomTime: true }; // create a timeline var container = document.getElementById('mytimeline'); const timeline = new vis.Timeline(container, data, options); // add event listener timeline.on('timechange', function (event) { document.getElementById("customTime").innerHTML = "Custom Time: " + event.time; var item = data.get(1); if (event.time > item.start) { item.end = new Date(event.time); var now = new Date(); if (event.time < now) { item.content = "Dynamic event (past)"; item.className = 'past'; } else if (event.time > now) { item.content = "Dynamic event (future)"; item.className = 'future'; } else { item.content = "Dynamic event (now)"; item.className = 'now'; } data.update(item); } }); // set a custom range from -2 minute to +3 minutes current time var start = new Date((new Date()).getTime() - 2 * 60 * 1000); var end = new Date((new Date()).getTime() + 3 * 60 * 1000); timeline.setWindow(start, end, {animate: false}); }35:[] 32:{"id":"13724ddbd07ec9b0","slug":"building-an-interactive-timeline-with-vis-js","title":"Building an Interactive Timeline with Vis.js","thumbnail":"4edbcd36aa5ca82e545ae448f5e4d5c94341165ce7b3a30aca4ac742805f1cc6","access_level":"public","create_time":"$D2018-05-09T11:36:05.478Z","update_time":"$D2018-05-09T11:46:16.977Z","view_time":null,"first_public_time":"$D2018-05-09T11:46:19.110Z","has_unpublished_edits":null,"fork":{"id":"3b3902766f1fcf7d","slug":"vis-js","title":"Vis.js","owner":{"id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis"}},"stars":5,"starred":false,"owner":{"type":"team","id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":"starter_2024"},"version":386,"publish_version":386,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"7cbfafa649b21931","slug":"ports","title":"Ports","owner":{"id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis"}},"type":"notebook","body":{"title":"Building an Interactive Timeline with Vis.js","cells":[{"id":0,"value":"md`# Building an Interactive Timeline with Vis.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`\n\nThis notebook ports to Observable a [Vis.js](http://visjs.org) [example timeline from Laboratório de sistemas de Língua Falada](https://www.l2f.inesc-id.pt/~david/wiki/pt/extensions/vis/examples/timeline/13_past_and_future.html).\n\nI reproduce for learning purposes and as a springboard for discussion with my work colleagues.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"md`\n*A note from the original author:*\n\n> When the custom time bar is shown, the user can drag this bar to a specific\n time. The Timeline sends an event that the custom time is changed, after\n which the contents of the timeline can be changed according to the specified\n time in past or future.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"customTime = html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"mytimeline = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"css = html`\n