Jeana Frost

Plotting Time

Research on timelines for digital stories

Mediamatic, Lava and our clients RVU and NHM are working to enhance digital storytelling through time-based visualizations. How can we better see and understand our history? How can we add our own understanding to historical events and personal histories?

Contents of this post:

Research existing work:
-Time-based data visualizations
-Contemporary dynamic timelines

Design proposal and sketches

Timeline Proposal - Sketch of a timeline with and without images. Jeana Frost

To inform our design, we began by thinking about the problem and exploring previous work.

Here’s a quick sampling of timelines in the digital and in some cases print world.

Sparks Timeline of World History - In this map of world history designed by John Sparks for Rand McNally, time runs on the y-axis and the composition of the world population over time is displayed on the x-axis. 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. Jeana Frost

Carte chronologique by Jacques Barbeu-Dubourg 1753 - In some ways this first formal timeline already demonstrates the need for the digital and suggests ways we can translate the digital back to print. Barbeu-Dubourg fit the complete human history, as he conceived of it thematically arranged. It was 54 feet long. He mounted it on scrolls for the viewer to see each section one at a time. 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… Jeana Frost

First Timeline - A Chart of Biography - Early and influential timeline from 1765, by Joseph Priestley. Although a new concept, Priestley argued that the abstract idea of time could be displayed on a line. "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… Jeana Frost

Charles Joseph Minard 1869 “flow map” - The Charles Joseph Minard 1869 “flow map” showing Napoleon's Russian unsuccessful campaign of 1812 was highlighted by Edward Tufte and others as an example of good data visualization. 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. The Charles Joseph Minard 1869 “flow map” showing Napoleon's Russian disastrous campaign of 1812. Popularized… Jeana Frost

O'Reilly Timeline of Programming Languages - Other visualizations show relationships between the variables. In this O’Reilly timeline of the development of programming languages, is plotted over time as is the relationship betweens these innovations. 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. Jeana Frost

Maeda's Calendar 1 - Digital media allows for dynamic generation of timelines and navigating through time to focus on one area or another. Although the digital media affords new types of designs, because these visualizations are often used for more than one application, there is less focus on relating events pictured to one another. In his early experiments on time, John Maeda created calendars that were meditations on time itself. Some of the methods he used were later employed to display data within a dynamic… Jeana Frost

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. McCloud led readers through the story displayed on this visual layer. Jeana Frost

McCloud Online Comic Example 2 - Later McCloud experimented with displaying the story through the third dimension. The reader is literally pulled into the story as she travels into the center of the screen to move from panel to panel. Jeana Frost

Example of an Interactive Timeline on BBC online - This [interactive timeline|http://www.bbc.co.uk/history/british/launch_tl_british.shtml] on the BBC website allows for many of these 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 take different tours through the site that highlight related events or search the site for events of interest. Jeana Frost

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. Jeana Frost

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. Jeana Frost

History of Wedgewood Timeline - Example of a timeline in a navigation bar. Overview is abstract. Mouse over shows and 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. Jeana Frost

Proposal Wireframes - Overview of Design Proposal Jeana Frost

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 time lines 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… Jeana Frost

Closed View - Initial view Casper's design for a timeline linked to the navigation bar. Designed to fit in each page in a subtle clear way. Jeana Frost

Closed Clustered - View when there are more events. Jeana Frost

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. Jeana Frost

timeline Open - To see more detail, a user can click on the chart to open up a full view. Jeana Frost

Timeline Open - Sketch for the timeline open with different types of events. Open Timeline - Alternate color and design scheme. Jeana Frost

Event Representation - How different types of events could be represented on the timeline Jeana Frost

Timeline Open Layers - Alternate view with layers/categories of events. Jeana Frost

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. Jeana Frost

Pop Ups - Closed view on mouse over. Jeana Frost

McCloud - Jeana Frost