Design For Understanding: Creative Earthquake Visualization
Within my three-person team, I designed and implemented the “creative” visualization, which you can play with right here.
The idea of making a visualization based on earthquake data was immediately exciting for me. My group partners James Witt and Haozhe Jiang built visualizations focused on clarity, which can be found here. I took the lead on the “creative” visualization because I wanted to make something dynamic and fun. After brainstorming, I settled on two main designs (and an additional alternate design) that had me the most excited.
I landed on a lot of different ideas during my brainstorming session. I knew I wanted to do a geography-based simulation since I wanted to do something with all of the latitudes and longitudes within our database. I ended up fleshing these ideas out a little more on paper, including a few alternate designs.
Creating these initial sketches allowed me to explore a group of fairly unique options. I had two ideas that were 2D, and one slightly more ambitious 3D idea for a visualization. My first and perhaps the most obvious idea was to display the earthquakes on a flat map projection. In order to incorporate more storytelling into the visualization, I had the idea to show a “breaking news” banner at the bottom that pulled from the metadata in JSON file about the location to give more information, such as “Earthquake of 8.6 Magnitude Strikes California!” Another similarly news-themed idea I had involved showing a picture of the location where the earthquake struck with a reporter’s speech bubble giving this information. This would provide less detailed geographic information. Instead, this would allow the user to watch the earthquakes unfold like a newscast.
I liked the idea of having a map since I believed that it would make for the most dynamic experience, and fit well with earthquakes as we know them. This is what lead to my third design, where the earthquakes would be visible on a globe. I decided to go for the 3D globe design, would be an engaging and intuitive way to understand earthquakes. Furthermore, this would this “creative” visualization to distinguish itself more from the “clarity” visualizations my group members were working on, utilizing mostly 2D maps and graphs.
Because the implementation of a 3D interactive globe with animated earthquakes, I decided to focus my initial prototype on this idea, instead of testing multiple, less complete prototypes. Additionally, because our team consisted of three people instead of four, I had to tackle the entire creative visualization side of the project myself.
Even though there are libraries and tools out there to do 3D geographic visualizations like these, I knew I would have the most control if I did things mostly from scratch using p5.js, doing the coordinate mapping myself. I found textures online from shadedrelief.com that happened to have generous terms of use. I scaled this image down so the visualization would load quickly and hosted it on my site. The p5.js library gave me fine control over lighting and texture, which I fine-tuned for a minimalistic look.
I initially showed earthquakes appearing as dots on the globe, which looked awkward. Before the initial prototype, I decided to revisit this and replaced the dots with expanding rings that more clearly brought to mind earthquakes rippling across the surface of the earth.
Testing the Initial Prototype
My initial prototype was fairly pared down compared to my final prototype, featuring expanding red rings displaying earthquakes on the earth’s surface. I was mainly interested in testing how people would interact with and react to a 3D visualization before deciding what details would be best to expand upon or fix.
For the initial prototype, I mainly let my testers explore the map and “think aloud,” encouraging them to explain their thought process and tell me interesting things they noticed during their experience. I took textual notes for each tester.
Overall, the reaction was positive, and I even had students asking me to me if they could test out the visualization and lining up.
While the immediate reaction was surprise and excitement at being able to manipulate a 3D globe, people had a little bit of difficulty with the controls. I modeled the controls after some of the p5 examples I saw online, where the angle was mapped to the cursor position without having to click and drag. My thought was that it would be more intuitive that the globe was interactive since a user could observe the interaction without having to click. This caused much unintended confusion, however, since testers immediately wanted to click and drag, perhaps because the visualization bears some resemblance to Google Earth and other similar applications. Some users even claimed the trackpad was malfunctioning because they thought the computer was registering a click when they were simply moving the cursor.
Another issue was that the globe only rotated directly along its axis. This simplified the interaction with the globe, but users complained about not being able to see earthquake activity near the poles, such as in Alaska.
While the rings differed in their starting and ending radii to indicate magnitude, some users suggested that the color should also vary.
The original visualization also did not include a title. Many users guessed that the globe was showing earthquake activity, but one user did not. More than just a title, there was also no information that indicated the date and time of the earthquakes being portrayed by the visualization, which lead to the obvious questions about what earthquake data was actually being shown.
With the overall enthusiasm I felt from my testers combined with the concrete details about usability, I had a solid idea of how to improve upon my visualization.
Testing and Refining the Final Prototype
Going from my initial prototype, I made a handful of concrete changes that I derived from user testing, which greatly improved peoples’ experience during the next day of testing.
Introducing more “Google Earth-like” controls for clicking and dragging the globe made interaction far more intuitive for users. This also meant that users could drag the globe up and down to get a better view of the poles. I did restrict this angle however, because I did not want users reversing the poles and getting confused. No one mentioned that the angle I chose seemed restrictive or annoying, so I considered the bounds seemed to be appropriately chosen.
Adding the title “Interactive Earthquake Globe” felt a little clunky at first, but I wanted to make sure users at least knew what they were watching, and attempt to interact with it as well.
In order to make it more clear that the visualization was fast-forwarding earthquakes for a database collected in the past, I included the date and time to make this more clear.
I also changed the colors of the rings to correlate with the magnitude of the earthquake being displayed. Smaller earthquakes displayed as less saturated, meaning they stood out less against the grayscale globe. This also had the effect of making the larger earthquakes stand out more.
Although this did not come up directly in user testing, I decided to speed up the visualization slightly so that earthquakes would appear more frequently, perhaps making the visualization a little more exciting to watch.
Most users guessed that both the magnitude correlated with both the size of the rings and the color. As one tester mentioned, for a future visualization, it would be interesting to see how people might perceive the visualization if the color scale were based on a different heuristic, such as depth of the earthquake. Being able to manipulate both the size and color of the rings yields a lot of flexibility in this regard.
After some minor changes to the date and time to make the formatting more recognizable, I published my final version, which looks like this:
The enhancements to the controls aren’t apparent from the screenshot, so if you want to try it out, you can play with the visualization here.
Comparison to Clarity Visualizations
My group partners James Witt and Haozhe Jiang worked in tandem on the visualizations focused on clarity. I felt comfortable doing the creative visualization since I had experience with p5 and 3D graphics. My group partners used Vega to implement their visualizations, and presented them alongside my interactive globe during user testing. You can view all the clarity-focused visualizations here.
This kind of visualization was much more useful for picking out which days experienced the most earthquakes. Being able to mouse over the graphs to reveal extra data was useful. These kinds of visualizations are clearly more suited for research, but getting a higher level view was harder. Being able to watch an animated globe gave those who weren’t geologists a snapshot of how seismological activity manifests across the globe.
The bar graph (which can be viewed here) enables a user to answer questions that would be challenging on my animated globe. The tall bars for Alaska and California stand out in a significantly.
Although, having an animated overview could potentially be useful for directing research, since features with significant earthquake activity are salient on my animated map.
Overall, the Vega charts met the goal of providing information with clarity, often in familiar formats that allowed users to explore the data on their own terms. Based on the responses I got through both prototypes, my animated globe was persuasive in that it compelled people to interact with the globe, since it was framed as a web-toy, aesthetically pleasing and fun to watch. The creative task of taking a batch of JSON data and finding a way to create a small but memorable experience with that data was enjoyable for me—I hope to explore the field of data visualization combined with creative coding further.