An interactive timeline visualization of projects related to the Opera of the Future at the MIT Media Lab.
See DEMO (more content coming eventually).
Requires a recent version of node.js that supports es6 module import and export syntax.
git clone git@github.com:mitmedialab/opera-timeline.git
cd opera-timeline
npm install
npm run develop- Navigate to
127.0.0.1:9090 - Add an entry to src/opera.yaml
- Wait for two seconds while the
developscript re-builds the app - Reload your browser to see the updated content
Media assets can be added to html/opera. Video and audio files should be added with git-lfs.
Examples:
Maybellene:
date: 1955-5
tags: [rock-and-roll, epochal, african-american]
detail: 'Chuck Berry released this genre-defining song in May of 1955'
audio:
url: audio/1955 - Meybellene.m4a
image:
url: img/chuck-berry-1957.jpg
source: https://commons.wikimedia.org/wiki/File:Chuck_Berry_1957.jpg
caption: Promotional photo of Chuck Berry from 1957
Powers of Ten:
p: 5
date: 1977
links:
- url: https://www.youtube.com/watch?v=0fKBhvDjuy0
text: YouTube
detail: |
This educational video portrays 40 orders of magnitude of physical scale.
It was selected for inclusion in the Library of Congress archives for being
“culturally, historically, or aesthetically significant.”
video:
url: video/1977 - Powers of Ten.webm
publishable: library of congress
startTime: 24Notes:
audioandvideofields can have astartTimesub-field, which offsets the beginning of the media content in secondsdatecan have several levels of precision1990year1990-2month1990-2-30day
pis the priority, and should always be a number. When two events overlap on the timeline, if one has a higher priority, that event will be shown, and the overlapping event will be hidden.detailcontains a markdown formatted text that will be parsed into html along with an image+audio or video.