This is a utility for creating interactive timelines like the one below:

Try A Demo

These timelines use a contextual zoom feature, which continuously adjusts between a high level overview of events on a time line and detailed granularity.

See https://github.com/mitmedialab/opera-timeline. Studying this example is currently the easiest way to learn how to implement your own.

IMPORTANT: npm install d3-media-timeline is not the easiest way to get up and running.

The best way to use this package is as part of a rollup.js build procedure.

Configuring a repo takes several steps. Once configured, it is very easy to add multimedia content to the timeline. Fortunately, you can start from an example that does all the configuration for you. If you do want to add features or contribute to this repo, and understanding of the following will be useful...

Some of the technologies involved include:

• rollup.js
• @rollup/plugin-yaml npm package, which is configured using the transform feature in the rollup configuration { plugins: [ yaml({ transform: populateHtmlFields })] }
• babel.js

Several frontend packages are used:

• d3.js v5 (A small subset of d3 functionality is used, and imported by this module)
• Kefir.js
• eventemitter3

Setting up a timeline application like the opera-timeline involves:

• JavaScript configuration (see below OR opera-timeline example)
• Content specified in YAML format (see opera-timeline example)
• Rollup.js configuration (see opera-timeline example)
• CSS to configure style (see opera-timeline example)

import { MasterTimeline, d3, createTimelineEvents } from 'd3-media-timeline';

// Load content from a yaml file.
import soundRecording from './content/sound-recording.yaml';
const soundContent = createTimelineEvents(soundRecording);

// Setup a MasterTimeline, which is the parent object for Timeline Objects
const parentSelection = d3.select('div#media-timeline');
window.master = new MasterTimeline(parentSelection);

// Add sub timelines
master.addTimeline('Sound', soundContent, { start: new Date(1877, 0, 1), end: new Date(1990, 0, 1) });

// Update the master, to ensure that the initial render is correct
master.update();