Simile timeline notes

✎ This article/section is a stub — some half-sorted notes, not necessarily checked, not necessarily correct. Feel free to ignore, or tell me about it.

⌛ This hasn't been updated for a while, so could be outdated (particularly if it's about something that evolves constantly, such as software or research).

SIMILE timelines (site / docs / wiki)

Concepts

A Timeline object has:

• Band objects: (one or more, optionally synchronized)
  • an associated event source (JSON data)
  • an Ether, mapping between time data and pixel offsets to show them at
  • an ether painter that paints the background (and related features, like range highlights)
  • an event painter that shows each event
  • decorators: zero or more, further decorate the band

Some things can take some themed styling.

Date labellers do the job of formatting dates (the most common is basic Gregorian formatting).

The ether keeps track of what dates are in view, so you can ask it what date corresponds to a pixel position. Functionality like that is also exposed on the band object, though, as are detail bubbles,

You can have bands listen to separate event sources, or to the same one (which is fairly common, to show the same thing at different resolutions). Data loading is done on the evert source object, though you may want to wrap that once you settled on your timeline/band details, for simpler scripting.

Usage

You construct a Timeline object, which takes:

• a DIV to create it in (a DOM reference, e.g. using a getElementById)
• an orientation (HORIZONTAL or VERTICAL)
• a specification of each bands' format, which includes things like:
  • a marking interval (year, week, )
  • how many pixels should be used by each such interval
  • the percentage width of the band in the available space
  • an eventsource (probably)
  • visual details like gap, whether to always paint the title,

XML format

The root is a <data> element, with:

• <event> children
  • with attributes (described below)
  • If you want to add a description, add an text node under it.

• some optional attributes
  • date-time-format, (possible values? iso8601? default? more?)
  • wiki-url, wiki-section help create links to discuss timeline items

Events have attributes:

• a title

• a start, and
• an end if it the event describes a period instead of a point in time

• a latestStart and/or earliestEnd if the start or end point isn't exactly known (and this described as periods)

• isduration

• image
• link
• icon

(see http://simile.mit.edu/timeline/examples/dinosaurs/dinosaurs2.html for examples of the use of these three)

• color
• textColor

See also:

• Example: http://simile.mit.edu/timeline/docs/example2.xml
• Parsing code: http://simile.mit.edu/timeline/api/scripts/sources.js

• http://simile.mit.edu/wiki/How_to_Create_Timelines for an example