How to visualize a timeline

I am working on a timeline of animation movies: specifically to see when Disney started to fade and Pixar/Dreamworks took over. What films were made when, who made them and in what way do they coincide with activities of e.g. Steve Jobs. Oh, and to see where that new contender, Blue Sky Studios (“Ice Age”) fits in.

I first started out with Excel: I figured I’d have a bunch of dated events and throw a quick XY chart onto it. But that didn’t feel right. I then turned to Powerpoint and created a horizontal timeline, on which I could place blocks. That works OK for events that are far apart, but not for a quick succession, nor for events with a duration (from … to …). And, frankly, it looked rather ugly:
Timeline: animated movies

Which left me with two questions:

  1. how do other people create their timelines, and
  2. are there on-line tools that let me do it easily?



Most timelines that were created in HTML (in most cases with a table) have a vertical timeline. These are typically sorted from oldest to newest in case of historical reports (long time ago), and from newest to oldest (i.e. reverse chronological, blog-style) for timelines where the most recent is the most interesting. Examples:
Timeline: histoy of CGI
History of CGI: vertical/chronological.

Timeline: NYT Leak
New-York Times: history of a leak: vertical/reverse chronological

Timeline: google zeitgeist 2001
Google Zeitgeist 2001: horizontal/chronological


Depending on the topic and the amount of available space, the designers use only text, text with a sporadic image, text/image combination or only images.

Timeline: modern chess
History of modern chess: horizontal, text only

Timeline: thinkprogress
Thinkprogress: vertical, sporadic image

Timeline: metmuseum
Metropolitan Museum: history of art: horizontal, text + images

Timeline: the arrow of time
The arrow of Time (Diegp Goldberg): vertical, chronological, only images


Most of the timelines I found are static HTML or images. Some actually go a step further and let the user interact with all that data: zoom in on a period or get details for an event. The tools for this are Flash or Java.

Timeline: ishkur's guide to dance music
Ishkur’s Guide to Electronic Music (which I’ve written about before): oldest = top left, with concentric circles going down.

Timeline:  pbs_dickens
A Dickens’ timeline: interactive Flash app, with a nice split up between Dickens’ works, events in his life and general events in England at that era.

Timeline: babynamewizard
Baby Name Wizard NameVoyager: Java application: shows historic popularity of English christian names.

REMARK: a lot of these examples I found through the Edward Tufte forum.


Haven’t seen any real on-line tools for it yet.

  • MediaWiki comes with a tool that needs some more installation care before it works: EasyTimeLine
    Timeline: easytimeline
  • Gliffy can’t do it, Thumbstacks can’t do it

RSS to Timeline converter

Why would you need a timeline? Just think about it:

  • add a timeline to your CV
  • show your blog’s feed as a timeline
  • show your project overview as a timeline
  • show your Flickr photo’s as a timeline

So a natural input API for an automatic timeline generator would be RSS: It has a title, a date, a description, a category (if you want to group events). It can even have a media object associated (audio, video, photo, PDF podcast). The programming part should be quite straightforward, but the graphical design is crucial: should be flexible and appealing. The output should be JPG/PNG or a dynamic Flash/AJAX application. Who’s gonna make it? If well done, it’s a ticket for TechCrunch!

7 thoughts on “How to visualize a timeline”

  1. Interesting stuff here. You should check out the books by Tufte if you haven’t already. He’s got some great examples in:

    The Visual Display of Quantitative Information

    More info at

    It won’t solve the lack of software issue but may spark more ideas.

  2. What kind of figures do you want to add to show the rising of Pixar? Sales, … This could help to imagine differents ways to represent and compare things. Is it just a chronology or a comparison between “competing” products (based on released, on target audience, … )?

  3. Try Visio. No examples to hand but possibly ideal for what you have in mind. Use multiple timelines stacked on top of one another to represent different streams, e.g. Pixar, Apple, IMAX Ticket Sales, etc…

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.