This report is written to document the process of how a visual timeline was created using Knight Lab’s TimelineJS. To select a historical topic to be reflected through the timeline, I am specifically interested in any milestones that could help me understand the history of visualization from a designer’s point of view. Considering visual design as an essential part of UX design, I looked at events in the history of subjects including visual art, iconography, decorative art, visualization of hierarchies, etc. The process of creating this timeline has improved my understanding in design theories and engaged my further interest in this topic.
TimelineJS was the tool used to build the interactive timeline of the milestone events in the history of data visualization. Datasets were found and selected from an interactive timeline resource, Milestones in the history of thematic cartography, statistical graphics, and data visualization (2001). This tool allows the information of the selected datasets to be entered and published through a Google Spreadsheet. Once the Spreadsheet URL is copied and pasted on the Knight Lab website, the embed code is generated, and it supports a slide-look web based timeline, listing all documented milestones with information that has been input.
I started by reviewing this interactive timeline of milestones produced by Denis and Friendly (2001). While browsing lots of milestones, I clicked on the thumbnails to read introduction of each milestone and selected those which might have an impact on visual design at a later time. I collected all essential information of each milestone and inserted them into the Google Spreadsheet. These information include the time of the milestone, a brief introduction, the media (image or video), and the thumbnail image. A background image can even be added to polish the look of the milestone. By consolidating the events into eras, I was able to look at them all more clearly.
The first data graph (fig. 1) and the network diagram on a map (fig. 2) are two visualizations invented in the 17th century, in needs of visualize the longitude or distance between two locations. The first data graph is also the first visual representation of statistical data, which marks a historical meaning in the history of visualization. Map is one of the earliest visualizations produced in the history. By looking at different maps in different eras, we could also see the gradual development of visualization.
fig. 1
fig. 2
As shown on the timeline, in the 19th century, the graphic method recording of motion (fig. 3) was presented, which had created an engaging way of visualizing consecutive activities. It is argued by many UX experts that a smart use of motion design could greatly support usability. Good motion design in UX/UI can support a sense of continuity for users when they interact with the interface. It is interesting to see how motion was recorded on the paper in the very beginning.
fig. 3
In the same era, pictogram (fig. 4), using icons to represent data proportional to a number, has a significant meaning to how icons are widely used for visual communication in today’s world. In UX design, how each icon is created and used is critical to the usability and visual effectiveness of the end product. Therefore, it is worth to know how icons were created as visualization to represent data in the 19th century.
fig. 4
Moving to the late 20th century, I focused more on how some modern visualizations could expand my inspirations in the process of UX/UI design. For example, mosaic display (fig. 5) would show frequencies of a certain pattern in decorative art. This might help me think when there is repetitive visual patterns, how I may use visual design to improve the usability. The fisheye view (fig. 6) utilized in photography, gives me an idea how I may call out a certain group of information in a visual way.
fig. 5
fig. 6
The emergence of USA today weather map (fig. 7) marks the beginning of an era of color information graphics in newspapers. It is known that color plays an important role in visual communication. This visualization has a significant impact on the way how visual graphics would grow and develop in more scenarios than just the weather map. In communication design, the proper selection of color could largely affect the meaning that is being conveyed. This is undoubtedly a wise and effective visualization method that a UX designer should master.
fig. 7
Tree Map (fig. 8) is a space-constrained visualization method developed for illustrating hierarchies, using a set of nested rectangles. Each rectangle represents a tree branch, and under the top-level branches are tiled with smaller rectangles representing sub-branches. Tree map is now widely used in UX design as a visualization method for information architecture.
fig. 8
When large bodies of text needs to be processed and presented, tag cloud (fig. 9) comes to play a part. It displays the words with different font sizes based on their frequency of use. The more frequent a word appears, the larger font size it shows on the visualization. This method is very useful for visually presenting the analysis results of qualitative data in the UX research work.
fig. 9
Overall, I think TimelineJS is very powerful on helping users create their interactive timeline. However, I wish there was a way that users could overview all events within one glance instead of having to select the slide one by one. It would also be great that sorting could be supported on the interactive timeline to help users or readers navigate through the slides. As for future direction of how I may move forward with this project, I would get into some events that occurred before the 17th century and during the 18th century. Currently I don’t have any event that is recorded in these two eras, which is causing a gap on the timeline. I believe the development of visualization have occurred step by step. Therefore, the final visualization of the timeline would be more convincing with events that were evenly and logically displayed.