For this project we needed to visualize a dataset with different parameters in an interactive representation. After some research, my team decided to pursue the topic of earthquakes since we
already had vague ideas about this topic and we found the most reliable and comprehensive dataset.
already had vague ideas about this topic and we found the most reliable and comprehensive dataset.
The goal of our visualization was to show the enormous differences in the released energy of
earthquakes of different magnitudes on the Richter scale in a proportional and thus tangible way. Due to the radial propagation of earthquakes, the circle plays a major role in our visualization.
earthquakes of different magnitudes on the Richter scale in a proportional and thus tangible way. Due to the radial propagation of earthquakes, the circle plays a major role in our visualization.
display - simulation
second semester 2020
team with
Linn Klaas,
Stefan Reich
my focus
40% concept,
60% software
second semester 2020
team with
Linn Klaas,
Stefan Reich
my focus
40% concept,
60% software
Visualization and key
The individual circles represent the respective earthquakes, which are arranged on a likewise circular timeline. This begins at "0 o'clock" with the year 2010 and ends at "12 o'clock" in the year 2020.
We have assigned a color to each of the continental plates. The colors of the earthquakes (which occur at plate boundaries) are created by mixing the colors of the adjacent plates. Each tectonic plate has been given a color that mixes well with the surrounding plates, so that the earthquakes are also displayed in a pleasant color palette.
The size of the earthquakes describes the released energy relative to the others. Since the differences in the intensity of the individual earthquakes were so large that we had to make the least intense ones infinitesimally small in order to still have the largest ones in the image, We included a zoom function that allows all earthquakes to be displayed in the desired size by scrolling. As soon as an earthquake is larger than the screen, it is no longer displayed in order to keep the visualization as tidy as possible.
The distance from the center of the visualization represents the depth of the earthquake's epicenter. The further out the earthquake is shown, the closer it occurred to the surface
The outline shows that the epicenter of the earthquake was under water, causing a tidal wave.
In order to view the earthquakes more precisely and in isolation, the displayed time frame can be adjusted by changing the mouse position within the visualization.
Changing the mouse position on the Y-axis determines the length of the displayed time period. With the mouse at the bottom of the screen, the full 10 years are displayed, while at half height, for example, only a section of 5 years is visible.
The displayed section out of the full available 10 years is then determined by the mouse position on the X-axis. With the mouse pointer at half height (of the Y-axis), but e.g. completely on the left side (X-axis) of the visualization, the first 5 years are thus displayed, while on the right (X-axis) side the last 5 years are displayed.
Changing the mouse position on the Y-axis determines the length of the displayed time period. With the mouse at the bottom of the screen, the full 10 years are displayed, while at half height, for example, only a section of 5 years is visible.
The displayed section out of the full available 10 years is then determined by the mouse position on the X-axis. With the mouse pointer at half height (of the Y-axis), but e.g. completely on the left side (X-axis) of the visualization, the first 5 years are thus displayed, while on the right (X-axis) side the last 5 years are displayed.
For orientation purposes, a slider below the visualization displays the currently selected
time frame.
time frame.
Process
We tried out several variations during the course of the project, but always came back to circular modes of representation, as this was the best way to reflect the theme.
We tried out several variations during the course of the project, but always came back to circular modes of representation, as this was the best way to reflect the theme.
Earthquakes arranged on linear timeline
We originally intended to include parameters such as people affected, property damage, or earthquake propagation velocity in our visualization, but could not find complete data sets for this.
Representation as a network diagram
We tried different implementation tools for visualization and initially used Figma and Hype. In the end, we switched to p5.js because it allowed us to easily embed our datasets and try out different variations much faster, which were then immediately visible in full scope. In addition, our planned interactions were relatively easy to implement with p5.js.
Early prototype on Figma, which implements the representation of different time periods in layers
A great advantage was the possibility to immediately try out how a color coding of the tectonic plates applied to the earthquakes. It proved to be difficult to compile a color palette of colors that should also look harmonious and especially not too brown-tone-heavy when mixed with each other.
Color coding of earthquakes based on the longitude & latitude of the epicenters.
My tasks in the team
In the team, my focus was mainly on the implementation of the visualization and interactions in p5.js, in addition to the concept development, which always took place together as a team.
