/earthquake

Primary LanguageJavaScript

earthquake

Earthquakes and Where They Were is a randomized visualization of latitudes and longitudes of North American Earthquakes since 1970, as stated on the site, available at jujucodes.githube.io/earthquake . Created with the goal of creating a visual of earthquake locations by depicting the earthquakes chronologically using “count” to draw them across the screen, the sketch produces a slightly different image every time by looping through rectangles using latitude and longitude as variables. The visual, though randomized, has utility, allowing viewers to grasp the locations and variance among them over several decades.

I started with thinking about the visual result I wanted to produce, which was something with a Perlin noise type of variance. In Perlin noise, several wave formations are merged to create one with seemingly random changes between individual data points but an overall relation, and I found that the variance in latitude and longitude points created interesting patterns similar to this. I found the Earthquake dataset while looking at others in the same geological theme, such as Old Faithful geyser times and Tsunami data. I chose the dataset for its numbers, but I also wanted the visual to accurately represent the data and add some level of meaning or accessibility to it. The visual shows patterns and changes, though difficult to grasp in meaning (for example, are earthquakes more likely to occur in the same area? Are most of them clustered within similar longitudes or latitudes?) yet part of its artistic beauty is also this perception of meaning. I chose the format of black and white rectangles for this “data” aesthetic, as data is often represented in bar graphs and black and white readouts and representing data in this way, even in a randomized visual, hints at its usefulness.

I had several main hurdles besides choosing the dataset, specifically the visualization and the buttons. I had to play around a lot with the looping rectangles in the draw function in order to produce the visual I wanted, which was something resembling a city or a Faultline. I used randomized rectangles to form the background, which slowly gets darker and denser as they draw over each other, and I used rectangles drawn on a certain x axis going up by count to create the “buildings” and their reflection in the foreground. The buildings have solid fill so that they are drawn over the randomized background, creating this visual representation of earthquake focal points. I also had some trouble with the buttons, especially with communication with the JSON file and using buttons to generate text. I settled on having one button that shows random locations represented by the rectangles and another that adds “interaction” and draws random black rectangles into the skyline. While I want to incorporate more complex interaction into future projects, I was glad I was able to get the buttons to work and I think they add something to the experience.

If I had more time, I would love to make the sketch more interactable. Specifically, I know that many users want to click on the rectangles being drawn to find more information on the specific earthquakes, and I would love to focus the interaction there instead of in buttons. I want to make each rectangle its own object so that users can click and interact with them inside the sketch. I think it would also be interesting to think about how I could display other data connected with these earthquakes visually, such as magnitude, lives lost or monetary damage. One idea brought up in critique is multiplying the magnitude by the longitude and latitude to affect the size of rectangles, representing visually which ones had greater magnitude. Overall, I learned so much through this project and I look forward to using these skills to develop many more!