Just in Time: Visualizing Knowledge with Digital Timelines

This week’s Digital Pedagogy workshop, “Just in Time–Visualizing Knowledge with Digital Timelines,” will occur Tuesday, November 10, from 4:30–5:30 pm, with a repeat on Wednesday, November 11, from 11:00 am–noon. The location is the library computer lab (Abell 208).

A few weeks ago we explored digital maps as forms of knowledge representation that draw upon the spatial and geographical dimensions of our knowledge. Likewise, much of what we know has a temporal aspect–history comes to mind, obviously, but many other examples of chronological sequentiality in information could be adduced, such as the arc of a fictional or documentary narrative, the series of arguments in a debate, or the stages of a scientific experiment. In some cases we wish to present information with both spatial and temporal dimensions, and a tool such as Story Maps makes that possible. In other situations, the spatial dimension is negligible, and/or we wish to foreground the temporal dimension, and thus we might select a tool that focuses on the narrative aspects of our knowledge.

timeline jsIn this week’s workshop we’ll examine the practice of creating timelines to visualize information in its temporal dimension. Specifically, we’ll take a look at Timeline JS, a tool created by the Knight Lab at Northwestern University. The basic idea of a timeline is simple–you have a number of discrete items or events that are sequentially related, which are then plotted against a single line marked by the appropriately-scaled chronological divisions. Each item opens up a larger unit of information, context, and further resources. Digital timelines allow the incorporation of text, image, audio, video, and other rich media elements. Students can then visually apprehend the temporal relationships among various items of a topic, and at the same time access further levels of information about a given item.

Derek Bruff of Vanderbilt has students in his cryptography course build an online timeline of the history of cryptography using Timeline JS. (Thanks and a shout out to Derek for making his course public so that we can all learn from his innovative pedagogy.) Here’s a blog post with some details about the assignment. And here’s a shot of the section from about 1900 to 1940, currently highlighting an item on the Choctaw Indian code talkers of World War I:

crypto timeline shot

Items can be placed on the timeline to correspond to a discrete point or a span of time. They can be grouped into subcategories to further distinguish different types of items or events. Clicking on an item displays its content, which, again, can include textual description and a wide range of media elements. Navigational arrows allow forward and backward scrolling from one item to the next, or one can quickly scroll through the timeline as a whole.

Building a timeline in Timeline JS is very user-friendly. A Google Drive account is required, because the information for the timeline is entered into a Google Sheets spreadsheet. Simply download the spreadsheet template from the Timeline JS website; each row corresponds to a single item, and the columns are already set up with the categories of information that are needed to populate the timeline. Here’s an image of a section of the spreadsheet for the cryptography project:

crypto spreadsheet

Each item has a start time; the end time parameters are used if needed to indicate that the event covers a span of time. Headline and text content are entered in the appropriate cells. Each item can incorporate one media element via a URL entered into the “Media” column. Timeline JS has built-in support for incorporating media from a wide variety of online content sources, including “Twitter, Instagram, Flickr, Google Maps, DropBox, DocumentCloud, Wikipedia, SoundCloud, Storify, iframes, major video sites (YouTube, Vimeo, etc.) and more.” Once all the data has been entered, the URL for the Google doc is used at the Timeline JS website to generate several lines of code  called “embed code.” That code is then pasted into the website that hosts the timeline (thus, you need to have a place on the web to host the project). Once published, the timeline is automatically revised and updated when changes and additions are made to the spreadsheet.

This arrangement facilitates collaboration among students, because the spreadsheet can be accessed by any number of them at any time. In Bruff’s case, he also has the cryptography timeline build from one iteration of the course to the next, so that each group of students is further enriching an already existing resource. Depending upon the number of items to be plotted and the intervals of time between them, the scale of the timeline can expand or contract in order to provide an appropriate visual representation.

Timelines of this kind do operate with an underlying concept of linearity, which in some cases may not be able to adequately represent the relationships among data and events. For example, phenomena that are more cyclical or recursive in nature might not be good candidates for representation with a linear timeline. And there may be concern in some situations that a linear timeline suggests a simplistic pattern of cause and effect or even promotes an unwarranted doctrine of progress. But these instances could then provide opportunities to engage students in deeper conversations about temporality and different ways of interpreting the connections among events and ideas.

Timeline JS is actually just one of a suite of tools developed by the Knight Lab that you might find of interest for creating compelling narrative presentations. There is also SoundCite, which embeds audio clips directly into the text of a story; Juxtapose, which creates a “slider” for before-and-after comparison of photos and images; and  StoryMap, which is similar in both name and function to the StoryMaps application from ArcGIS that we previously explored.

Once again, we look forward to seeing you this week.

Curated resources

Leave a Comment