Plotting Time

Timeline Proposal-

Sketch of a timeline with and without images.

Sparks Timeline of World History-

In this map of world history designed by John Sparks for Rand McNally, time is on the y-axis and the composition of the world population is displayed on the x-axis. In this design, Sparks highlights the rise and fall of empires over time.
Image accessed on a Course site held at York University.

Carte chronologique by Jacques Barbeu-Dubourg 1753-

In some ways this first formal timeline already demonstrates the opportunities in the digital world. Barbeu-Dubourg organized all of human history into themes and drew them out on one timeline but, the timeline is 54 feet long. The solution then was to put it on a scroll so viewers could scroll through it - a slower but not categorically different solution to (early) digital timelines.
Picture found on York University Timeline Visualization Course website

First Timeline - A Chart of Biography-

Early and influential timeline from 1765, by Joseph Priestley. Novel idea at the time, "Priestley argues that although time in itself is an abstraction that may not be 'the object of any of our senses, and no image can properly be made of it, yet because it has a relation to quantity, and we can say a greater or less space of time, it admits of a natural and easy representation in our minds by the idea of a measurable space, and particularly that of a LINE.'"
-Rosenberg, Cabinet Magazine 2004

Charles Joseph Minard 1869 “flow map”-

The Charles Joseph Minard 1869 “flow map” showing Napoleon's Russian disastrous campaign of 1812. Popularized by Edward Tufte and others as a preeminent example of good data visualization, this diagram actually breaks the formal structure of a timeline running time both forwards to the right and back again. It uses graphics and color to not only show the passage of time but to tell a story (Rosenberg, 2004). Plotting time on the x-axis going left to right and then right to left, the map displays not only the timing of the campaign but also the size and distribution of the army during its attack and retreat.
Image available under Wikipedia Commons

O'Reilly Timeline of Programming Languages-

Other visualizations show relationships between the variables. In this poster by designers at O’Reilly, the development of programming languages, is plotted over time as is the relationship between these innovations. This is a poster design. In print, they are quickly running out of space.

Maeda's Calendar 1-

Going digital affords new opportunities of course. The display can be dynamic and highlight new elements of time. Users can navigate at different time scales. In his early experiments on time, Calendar 1, John Maeda created calendars that were meditations on time itself. Some of the methods he used in particular the algorithm driving Calendar 2 were later employed to display data within a dynamic time visualization.

McCloud Online Comic Example 1-

Comic books tell a story over time using graphics. Scott McCloud’s early online comic books in particular provide a couple insights on the digital display of time and narrative. In his initial studies he toyed with the idea of the “infinite canvas”, a page within the web browser that users navigated by scrolling. In this comic, hearts and minds, McCloud led readers through the story displayed on this visual layer.

McCloud Online Comic Example 2-

Later McCloud experimented with displaying the story through the third dimension. In this comic, The Right Number, the reader is literally pulled into the story as she travels into the center of the screen to move from panel to panel.

Example of an Interactive Timeline on BBC online-

In the digital environment, timelines become more plastic and dynamic. Users can navigate at different time scales and focus in on one area or another. This Interactive Timeline on the BBC website showcases a number of digital possibilities. There are two primary time scales and the ability to zoom in on the detail view. In addition, the timeline shows the context in which events occur by displaying key epochs in history as the backdrop of the visualization. The reader can also search for events of interest or take different "journeys" through the content (a screen capture of from the women's rights journey is displayed above). Each journey highlights relevant events from the timeline. Unfortunately, in the overview, there is no information about the individual events without a mouse over. Also, it’s difficult/impossible to find an event that you have seen previously unless you know exactly when it happened.

NYTimes_Timeline.png-

On the NY Times site, they use interactive timelines like this one to illustrate selected news stories. These are clear and simple to navigate. Again the individual events are not labeled but mouse over reveals the content of the article immediately and without overlapping the timeline itself. The reader tabs through years to see all the contents. The drawbacks are there is no way to see all the events at once to get and overview or to read about the individual events without a mouse over.

RVU Project-

Student project implemented in flash. This timeline shows a vivid, dynamic view of each decade. Users can drill into each one for more detail but the design does not scale for larger archives.

History of Wedgewood Timeline-

Interesting to see an example of a timeline in a navigation bar. On this timeline from the Wedgewood Museum the overview is abstract. Mouseover shows an image. And, on click you see a detailed description of the object. Limitation is no idea how to re-find a piece of interest. And this may not work for a more complicated history project not based on objects.

Proposal Wireframes-

Overview of Design Proposal

Screen shot 2010-03-31 at 3.15.20 PM.png-

David François Huynh while at MIT and subsequent developers have created a suite of open source visualization tools called SIMILE including a timeline widget. The timeline is clear, and easy to navigate. On their site, example timelines like this one of JFK's assassination show the data at multiple time scales. individual events are labeled for quick review, and you can see both single point events and events with a duration. One uncertainty is that the site states they support zoom functionality but forum posts indicate there may be some difficulties in the implementation. I captured these images late March, 2010. See sites below for more examples:
Cabinet Magazine Issue on the history of timelines
Virginia Tech Course
Visualization Time Course Site at York University

Closed View-

Casper's design for a timeline linked to the navigation bar. Designed to fit in each page in a subtle clear way.

Closed Clustered-

View when there are more events.

Details seen on Mouse Click-

Casper Glorious designed this view for what users will see when they click on the timeline either collapsed or full. Because it's on click, a view could see more than one and choose whether to continue on to see the article or the expanded timeline.

timeline Open-

To see more detail, a user can click on the chart to open up a full view.

Timeline Open-

Open Timeline - Alternate color and design scheme.

Event Representation-

How different types of events could be represented on the timeline

Timeline Open Layers-

Alternate view with layers/categories of events.

Curated Timeline Sketch-

A list publish view as a timeline. In this rough sketch I am exploring what a curated timeline could look like. An editor would chose which events to display in order to illustrate a particular story.

Pop Ups-

Closed view on mouse over.