GRA

Historical Data Visualization in the Humanities

Background

As more and more data is generated in the world through things like apps and sensors, actually making sense of the data so it is useful becomes even more important. From a digital humanities perspective, questions like individual interpretation of data and alternative histories of visualization are considered. 

Broad goal: Explore how historical visualizations can be recreated today using modern technology. From the recreation, learn about the original and about modern methods and techniques of visualization.

Specific goal: Recreate a visualization from Elizabeth Peabody, a 19th century educator, which aimed to be a method for charting and learning history. 

My role: Lead designer, developer for initial prototype 

Live site: http://shapeofhistory.net/

One of Peabody's historical charts visualizing a series of historical events. Composed of squares within squares, the entire chart (or largest square) represents a century, the four quadrants provide visual aide to locate the 10x10 or 100 squares that represent a year, and the smallest squares, 3x3 or 9 within each year, represent types of events. Color represents different countries. 

One of Peabody's historical charts visualizing a series of historical events. Composed of squares within squares, the entire chart (or largest square) represents a century, the four quadrants provide visual aide to locate the 10x10 or 100 squares that represent a year, and the smallest squares, 3x3 or 9 within each year, represent types of events. Color represents different countries. 

Users

We considered distinctions between humanists, who have varying degrees of familiarity with technology, and anyone who might stumble across the project site online. We ultimately decided to design for the latter, as anyone who might come across the site should have an intriguing, positive experience. However, this wouldn’t necessarily be *anyone* as it would likely be through a link on a technology or digital humanities site, so we assumed some degree of familiarity with interesting digital things. 

 

Initial design and prototype

In early 2016, I worked with another graduate student to quickly design and develop an initial version of the website as a proof-of-concept prototype. Our implemented design was restricted by our knowledge of web development - as neither of us were experts. 

A screenshot of the original prototype. At the point in the process, we wanted to show that the technique could be translated to a digital medium and were less worried about the visual aesthetics of the website. 

A screenshot of the original prototype. At the point in the process, we wanted to show that the technique could be translated to a digital medium and were less worried about the visual aesthetics of the website. 

Design of version 2.0 

Working with two undergraduate students under the direction of a professor, I created mockups of both low and hi fidelity to guide the development. I also created the visual assets for the site, including images for the “How it Works” section explaining the method. Through the process, we wrestled with a lot of design decisions. Three critical decisions affecting the site as a whole were the structure, navigation, and overall visual design. Many more decision decisions were made regarding the “modernization” of the historical method, particularly in regards to detailed interactions. Some of the ones I had the most fun working with are described below in detail. 

 

This mockup, which I created in Sketch, shows an updated version of the design. We reverted to the original orange color, and paid attention to how users might change the colors and add their own data.

This mockup, which I created in Sketch, shows an updated version of the design. We reverted to the original orange color, and paid attention to how users might change the colors and add their own data.

Design Challenge: Structure, Navigation

In our initial prototype, we were more concerned about the detailed interactions with the chart rather than the overall navigation of the site. The focus is the method, so this makes sense. At this point, the navigation was a standard tabular structure with links to different pages in a navigation bar at the top. 

Then, we moved onto a parallax method, because we wanted to emphasize the idea of telling a story through time - and it was trendy and modern which would emphasize the transition from the past to the present. 

Finally, especially with the addition of the two undergraduate students and their expert programming skills, we worked towards a navigation method in the setup of the grid itself. To explain this idea, I first created a paper prototype and made a gif to show the movement around the page. Next, I made a slightly higher fidelity mockup using images from Sketch and Axure for the animation. The final result actually allows for three times of navigation interaction: clicking on the side navigation bars - which represent the boundaries of the square in the grid, panning across the entire site, and clicking on the navigation status icon in the top left corner to reveal a popup with descriptive titles of each section.