a HUMAN CENTER DATA VISUALIZATION HISTORY TIMELINE

Introduction

When we look at a timeline of any history, many people immediately feel insipid. It’s hard to deny the insipidity if we only read plain data tags such as event names and dates in chronicle order. Meanwhile, it is equally boring to read a large chunk of event details without multimedia or interaction. As a result, a timeline with a better interactive design and a unique angle to view history is needed.

To create an intriguing interactive timeline of data visualization history, I follow two rules. First, I make the timeline a human-center timeline. That means when I choose the event for this timeline, the decision is based on both the significance of the event as well as the person who is connected to this event. In most cases here, I select people who created or improved a form of data visualization. Secondly, I chose to use their representative work, such as chart/map/diagram, instead of their personal image to present them. After all, their works tell their story better.

_{*This time only covers important figures of data visualization history from 1600-1900 due to the limitation of time and lab requirements.}

Documentation Process

Phase 1 – Select Tool – TimelineJS

This is the first time that I use an open-source tool to create a timeline, and the overall experience is very pleasant. Here is an introduction quote from the official website.

TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet, like the one we used for the Timeline above. Experts can use their JSON skills to create custom installations while keeping TimelineJS’s core functionality.
From TimelineJS website homepage

Under the introduction, user can find a step by step instruction to guide them to finish the timeline. More details of this part will be presented later in phase 3 of this section.

Besides, for a non-programmer, TimelineJS provides an additional Q&A section on the bottom of their homepage to research on other topics. For example, users can find how to change their text style in the Q&A section. Basically, they just need to follow the instruction and insert the code, they can do what the programmer can, which is alter the CSS while using the in-line function.

Phase 2 – Data Gathering

I made a personal selection of events based primarily on my interests after reading several articles about the history of data visualization. Then, when creating the timeline, I mainly used two sources which are the datavis.ca milestone page and Dundas.com’s blog. The milestone page is actually an exhaustive historical timeline of data visualization. However, when we read it, it’s really hard to tell which events are more critical than others. The Dudas’s blog does make a selection of events but it shares too much content for every single one of them. Therefore, I choose to learn from both. In addition, I use Wikipedia to pick up general information on those historical figures. Now, the data collection period is complete.

Phase 3 – Step-by-Step Method

Create the spreadsheet
This step begins with the instruction from TimelineJS. You can simply copy their pre-formatted google spreadsheet to your account. Then, what’s important here is the content. The first thing I did is to determine what I want to put on the cover page. Then, you can fill the rest of the cell with data that you already gathered from phase 2. When you finish the content, you can follow the instruction to publish the spreadsheet. Now you are ready to preview the timeline.

_{*An example of the spreadsheet}
Alter the design
In this stage, you can modify your timeline using the panel on the homepage. For example, you can alter the text size and move the nav bar, etc. Even if you don’t know how to code, you have some options to make your timeline quite unique.

As for my design, I alter the text font and navbar. I changed the default font to Playfair for two reasons. First, a serif font presents a sense of vintage as well as a formality, which matches the tone of this timeline. Secondly, William Playfair played an important role in data visualization history. Thus, this is a hidden surprise of the timeline. As for the navbar, I move it from behind the timeline to the top. This way, our diagrams will have more space visually.

_{*An example of the design panel}
Share the timeline!
At this point, congrats! You finished the timeline. The only thing you need to do is share it in the right place.

Reflection

As I mentioned before, creating a timeline using TimelineJS is an overall good experience. Because of pre preparation that TimelineJs provides, I think this tool is the most efficient tool to create a timeline. On the other hand, as a professional interactive designer, I do want to share some insights on the limitations of this tool.

My major complaint about this tool is the design limitation. Though TimelineJS provides several choices for users to modify the timeline such as text color and font. There is not much we can do. For example, I can’t change the tag color nor can I change the spacing between text and images. Even though I can modify all these by changing the CSS, I do expect that there will be more functions that don’t require me to alter the code by hand. In the meantime, the tool doesn’t allow the user to change code as easy as WordPress did too.

Therefore, I think there is much I can do to evolve this timeline. The first thing I would do is specified the spacing between elements. I want to add more space between the text and the diagram. I would also add some spacing between the title of the paragraph and the main content. Thus, the view will have a better understanding of priority. Secondly, I want to have more control over the background color. I would like to change the timeline’s background to add more contrast. Finally, I want to explore if I can add more interactive functions. For example, make the diagram playable.

gO TO MY TIMELINE