Online Timeline Builders

Interactive timelines can be a handy reference for students (or faculty! or researchers!) in almost any course.  Their relevance for the humanities and social sciences almost goes without saying, but one could easily imagine an interesting timeline about human development, or evolution, or the formation of galaxies, or any other topic.

In this post, I want to comment briefly on three tools for building timelines, and introduce an assignment that I’m trying in a variety of different contexts this semester.

First, here’s Eric Meyer’s CSS for “building a structured timeline out of a table.”    As you mouse over the timeline, the row changes color, and it looks like table items could be clickable.   It’s very simple–just HTML and CSS, and I think just one hack for IE–and so it’s clean, compact, and easy to fiddle with.  (Eric does miraculous things with CSS–I’ve been using his S5 (Simple Standards-Based Slide Show System) template as a lightweight Powerpoint-replacement for years.)

Second, here’s the Center for History & New Media (CHNM) timeline builder, which is still in beta, and which requires signing up for an account.   (Thanks to Heather for the tip!)  You can watch a movie about the process here.  It’s Flash-based, which offers cool slider controls and the easy ability to zoom in and out.  Also, although I’ve never used it, it appears to have a pretty straightforward interface for adding new data.  Because it’s still in beta, it only outputs text and links, but there are plans to add support for images.

These first two systems strike me as visually interesting, easy-to-use ways to showcase information for students.   They allow you to have clickable points on your timeline, which allows students to see a whole period at a glance, and then click on individual items for more information.  The zooming ability of the CHNM timeline builder, coupled with the slider at the bottom of its screen, gives students the ability to rapidly scan chunks of time before isolating on a particular area of interest.

But what if you could do all that with image support, the ability to color-code and filter events by type, and the ability to locate events on a map?  And what if that timeline could read data in a variety of formats–xml, json, and others?  And, finally, what if that timeline could update itself in realtime from, for instance, a Google spreadsheet?

Well, what you would have is the SIMILE project’s Timeline.   (Click the link for a variety of samples–their standard model is JFK’s death, which shows off the interface’s zooming capabilities very nicely.)   The Timeline is, according to the website, “a DHTML-based AJAXy widget for visualizing time-based events. It is like Google Maps for time-based information.”  The interface looks a lot like the CHNM timeline, but it’s not Flash–it’s just CSS, javascript, and HTML.

Timeline is an excellent choice for faculty (or others) interested in allowing students to build up their own reference document.  By inviting students to collaborate as contributors to the Google spreadsheet, they can populate the timeline with information, pictures, links, and more.

This semester, I’m having students build a timeline of the Victorian Age using a Google spreadsheet and the SIMILE Timeline script.  Here’s my description of the assignment, which is about to get under way.  The assignment wouldn’t have been possible in the short run without the collaboration of the indefatigable Brian Croxall, who has also posted here about this project.  You can see the timeline here, although it won’t have much data for about another month.  What you CAN see are Brian’s detailed notes about how he set up the timeline.  (Click “View Source.”)  This assignment’s nifty because it encourages students to learn a little something about the Victorian period while allowing them to contribute to something interesting that will live beyond the semester.

I have another couple of assignments for this semester that are still in rough form (for instance, using the Timeline interface to plot the events of a novel), and will post them here as events warrant.

So, while any of these are useful tools for creating timelines and deserve some study, what sets the SIMILE project’s timeline apart for my purposes is its ready-to-hand support for crowdsourcing the creation of timelines, which makes for a far richer classroom experience.

Do you have other handy tools for representing information visually?  (Also, Brian and I would be grateful for comments on the assignment!)

This entry was posted in Uncategorized. Bookmark the permalink.

6 Responses to Online Timeline Builders

  1. Eric Meyer says:

    In my timeline, each of the individual data points could easily be made clickable by just wrapping a hyperlink element around the content. Making things like the rows and columns clickable would only be possible with the use of JavaScript event attributes (e.g. onclick). That’s one of the drawbacks of using table markup.

    I think an assignment on crowdsourcing a timeline of the Victorian Age sounds pretty darn cool, but then I do have a B.A. in History.

    Thanks for the kind words about both S5 and the timeline! They were definitely fun to do and share with the world.

  2. tbrock says:

    BeeDocs Timeline is pretty sharp. great for producing timelines that will be in presentations.

  3. Dance says:

    Looks very cool. Teaching history, my first inclination would be to do it in collaboration with the class wiki, asking students to tie it to things in their notes.

  4. jbj says:

    @Eric–thanks for the tip!

    @tbrock: I’d not heard of BeeDocs–thanks. (I’ll need to see what additional capabilities the $40 gets you . . . .)

    @Dance: That makes sense, too. My assignment is almost a stereotypical literature professor-attempt to gesture at historical context without profoundly derailing the literary content.

  5. @Dance, I believe it wouldn’t be too difficult to include links within the items on the timeline to particular wiki pages for a course. If you look at SIMILE’s example of JFK’s assassination, you’ll see that each event is linked to a MediaWiki page. I anticipate that we could do something like this with PBWiki, where the page wouldn’t even have to exist before a student clicked on the link.

  6. Lauren says:


    For a powerful and fun online timeline tool that lets you add videos, pictures, sound and text, try No programming necessary! There’re wiki like functionality in terms of collaboration and tracked changes.

    I’d love to get your feedback on our tool.

Leave a Reply

Your email address will not be published. Required fields are marked *