Introduction
Creating a timeline is a simple and effective method to visualize chronological information. The timeline provides a linear data environment for an observer that signifies temporality and delivers an enjoyable user experience. Aside from just being an attractive and easy to understand model, a timeline promotes a sense of progression, advancement, or decay between chronological data points, producing a useful narrative element for a designer to manipulate.
The following report covers the creation of a timeline using TimelineJS to depict technology milestones in data visualization from 1800 to 1882.
Materials
- TimelineJS: Open-source timeline creation tool available at http://www.timeline.knightlab.com by Knight Lab through Northwestern University.
- Milestones in the History of Thematic Cartography, Statistical Graphics, and Data Visualization: Source of chronological data points of innovations in data visualization at http://www.datavis.ca/milestones/ by Michael Friendly and Daniel Denis (accessed September 7, 2017). Referred to as the “Milestones site” for brevity later in this report.
- Google Sheets: Program used within Google Drive to open and edit the timeline spreadsheet.
- Notepad: Text software used to embed timeline file.
Methods
Data Collection
To begin the timeline creation process, ten innovation data points from the Milestones site were selected that appropriately fit the theme of this visualization: technology milestones in data visualization from 1800 to 1882. After finding ten innovation data points, images were collected that pertained to each data point. Two images were gathered for each data point: a portrait of a person associated with the innovation and an image of the technology or a representation of the process involved in the innovation.
Visualization Creation
After collecting the data, TimelineJS was accessed. First, a spreadsheet was downloaded from the tool. Next, years for the innovations were entered into the first column of the spreadsheet to establish the positions of each data point within the resulting timeline. Headlines, text from the Milestones site, and image URLs were then added into the spreadsheet. Images of technologies and processes were included in the Media column to appear as main images for the data point slides while innovator portraits were included in the Media Thumbnail column. Appropriate media credits and media captions were entered into their corresponding columns. A title slide was established by adding “title” into the Type column for a row that included general information for the timeline.
Screenshot of spreadsheet used for the resulting timeline. (Click to enlarge.)
Once the spreadsheet was completed (click here to view the spreadsheet), the file was published to the web, added to TimelineJS, and a link was generated and then pasted into a timeline generator field on the same site to create an embed code. The resulting embed code was pasted into Notepad to create an HTML file to view the timeline.
Results & Discussion
Please click on the following link to view the resulting timeline:
The above timeline is the visualization that was produced though TimelineJS with the addition of data from the Milestones site.
This visualization successfully exhibits an interactive data experience, a progressive narrative, and allows for easy consumption of its temporal data points. By clicking on the arrow buttons on the left and right sides of the visualization, observers become users of the timeline by moving forward or backward in time. This interaction permits the data to be experienced through time, allowing the observer to view the information as a story that changes with each slide. The observer can see how technologies have changed year by year, one at a time, like pages in a book rather than facts on a single page. This interaction produces a narrative that clearly communicates a progression of technology starting with coordinate paper and ending with motion. Observing how technology has advanced in this linear format allows it to be seen as somewhat dramatic, even though the timeline spans only 82 years. With each slide, one innovation is consumed at a time, allowing the observer to digest, or understand, each point before moving onto the next. This format can be appealing, easy to understand, fun to use from an observer’s viewpoint, and allows for a progressive narrative to shine through.
Moving Forward
The resulting timeline was shared with a fellow classmate from Pratt Institute’s Information Visualization course. We compared our timelines and shared design advice based on our work. One key finding from our discussion was that a closing slide could be useful for showing future pathways for progress at the end of our timelines. TimelineJS does not provide an easy avenue for creating a closing slide (as opposed to the title slide, for which the designer just has to include the word “title” in the Type column). One workaround that we came up with is to enter a final date, ideally as the present year, into a new row on the timeline spreadsheet to include a closing slide. However, this workaround still forces the closing slide to include a date, which could be especially confusing for timelines that consist of dates with days since the day that the visualization is presented would likely be far enough in the future, making the closing slide date look out of place. A simple addition of a “Final” option in the Type column of the spreadsheet would fix this, but TimelineJS still allows for the production of clear and effective timelines without this functionality.