Information visualization is the practice of displaying raw data through the use of charts, graphs, and images. Modern day visualizations rely heavily on computer applications and technologies. These technologies began taking shape as early as the 1600s, and have steadily advanced to where we are today. Using this timeline, I attempt to highlight some of the major technological advancements in the history of information visualization. Beginning with the first projected image and continuing through the first interactive mapping system, this timeline illustrates the progression of technology and how it has helped us to better understand data.
A visualization that I referenced when creating my timeline was the “Women in Computing” timeline on the homepage of the TimelineJS website (pictured below). One of the components of this timeline that I incorporated into my own was to use a background image for the introduction slide, then shifting to solid color backgrounds for the content-containing slides. I thought this made for a more visually appealing project, while improving legibility on slides that contained more text.
Another component of this timeline that I referenced was the use of a youtube video. The first draft of my timeline only included images. After looking over the “Women in Computing” timeline, however, I noticed that there was an embedded video on one of the slides. This prompted me to add a video to one of my slides, which made the timeline more engaging.
The data that I used came from the Milestones in the History of Thematic Cartography, Statistical Graphics, and Data Visualization timeline.
I began creating my timeline by looking over the Milestones in the History of Thematic Cartography, Statistical Graphics, and Data Visualization timeline and trying to pick out a theme that interested me. I arrived at the theme of citing a handful of landmark technological discoveries that helped shape modern-day data visualization. I found six events on the timeline that I thought would provide users with a brief illustration of this evolution, and wrote a brief description of each. Once I had my six events and descriptions, I found some useful media for each event that would provide the user with more context.
After compiling all of the content for the timeline, I began the process of creating the visualization. The first step was to enter all of my data into a Google spreadsheet, using the template provided by TimelineJS (pictured below).
Once the information was entered into the appropriate columns, the spreadsheet could be “published” to generate the timeline. At this point, I could see how my text and media was translated from the raw data in the spreadsheet to the visualization. This allowed me to begin making design changes and see how they affected the visualization in real time.
One of the major design goals of the visualization was for the user to be engaged with the content and media, and for the color scheme to feel cohesive from start to finish. Because my introduction slide uses a background image and the rest of my slides use a solid background color, I tried to pick a color that would create a seamless transition from the introduction into the content slides. According to my mini-UX study, I was able to accomplish this while also maintaining legibility of the text.
My timeline, pictured above, can be seen in full here.
Information Visualization has a rich history dating back centuries. Given the nature of this project, I was only able to capture a small portion of this history. A more detailed exploration into this theme could certainly yield a much larger and more nuanced visualization. My timeline does, however, illustrate one important principle: the exponential rate at which technology progresses. While early advancements on the timeline are few and far between, they start to increase in frequency as time goes on. This trend is not exclusive to data visualization, but can be seen across technology in general. Every technological advancement that we make tends to be larger and happen at faster rate than the previous.
From a design perspective, the only thing I would reconsider in the future is the use of thumbnail images on the timeline. I used these because I thought they were an interesting feature of TimelineJS, but I’m not sure how helpful they are. The image size is so small that they can’t easily be interpreted by the user. After conducting my mini-UX study and reviewing the timeline myself many times, I decided that I would probably leave them off in future projects of this nature.