Matt Bango has published a pretty awesome pure css timeline visualization.  Best part about it is that he’s documented it QUITE well.

A few key concepts:

• The width of the nodes is pre-populated in the CSS
• The display is based on a pair of UL’s one for the timeline elements and one for the intervals at the bottom.
• Width is allowed to be specified in a style attribute on the individual nodes

There’s some pretty clear opportunities to automate the creation of this widget in javascript that I hope to circle back to some day.  In the mean time, you can check out the article and demo here:

http://mattbango.com/notebook/web-development/pure-css-timeline/

As Timelines go, this is probably the most advanced widget I’ve come across.  It’s designed to facilitate theming, huge time ranges, various levels of detail, large variations in resolution and even data mashups.

So, how does it work?

Reading through the project wiki, they call out the way individual lanes of the timeline are built in code.  It’s a well formed architecture so I thought I’d call it out as well.

• The timeline is divided into bands.  Each band has its own data source (‘event source’) which allows for handy data mashups.
• The band has its own ether, a map between pixel coordinates and dates / times.
• The ether has a dedicated ether painter which is responsible for date / time rendering as well as background details and highlighting.
• Decorators augment the background of the band
• the bands event painter is owned by the band and responsible for the rendering of a bands events.

Check it out here:
http://www.simile-widgets.org/timeline/

You can also  read more about the architecture here:
http://code.google.com/p/simile-widgets/wiki/Timeline_Basics

Eric Meyer recently posted an interesting take on marking up and styling a timeline from static html.  In his case, a table was used to present a timeline featuring multiple points in a single swim lane.

Cool Trick

Working my way through his description of the code, I was most impressed by his creative use of title attributes in the CSS. Basically, by writing  CSS rules of the form:

#timeline p[title~="August"] {left: 62%;}

He uses the [title~="MonthName"] to determine where in terms of 1/12 of the year, the dot representing the event should be placed within the block representing the year.  This only requires the creation of 12 css rules for accurate placement. Since the title is standardized to be the date of the event, this allows him to take his queue for visual layout straight from the content being provided to the user.  Definitely a useful trick.

You can check out Eric Meyer’s Structured Timeline here:

http://meyerweb.com/eric/thoughts/2008/01/21/structured-timeline/