With earthquakes on the brain lately, and the occasional quiver underfoot, Wellington feels ever so slightly on edge. I’ve found it hard to focus on anything less than ground shaking, so I turned to my old friend (*rictus grin*) JavaScript to turn my afternoons of refreshing Geonet and diving under the desk every time I feel the slightest tremble into a foray into a brave new world; stirring up the Mapbox API with D3.js.
This is what I made.
The visualisation is made up of two components; the chart on the left is a D3 visualisation linked up to the map on the right, for which I used the Mapbox GL JS API.
The D3 visualisation plots the last 100 quakes detected by Geonet from the time of the -100th quake to the time your browser executes the code. The x-axis shows the time of the quake, the y-axis shows the depth in km, and the size and colour of the quake blob indicate its magnitude. You can hover over a quake blob on the D3 chart to see its location highlight on the map, and, if you’re on a desktop computer, hover over a quake on the map to see it highlight on the chart. I’m still working out how to make the functionality more accessible for mobile; for mobile users, try tapping on the blobs to see the map information pop up.
Something you might notice is that I haven’t used a logarithmic scale to represent the real difference in magnitude between the quakes. Magnitude is a logarithmic scale, so my representation of quake magnitude is very inaccurate. The reason for this is that a logarithmic scale made the variation in blob size so enormous it was impossible to read the chart. I’m keen to hear suggestions from anybody on how to make the blob sizes more representative; a toggle switch to allow users to satisfy their curiosity by switching over to a logarithmic scale is on my feature wish list.
The Geonet API delivers a data object containing data on the most recent 100 quakes (I set the query parameters to exclude quakes below magnitude 2). This variable timeframe means that setting the scales for the visualisation’s axes was problematic. How long should I make the time scale? Sometimes the API would serve up 100 quakes that had occurred within the last 12 hours, but on other days I would have 48 hours’ worth of data to play with so the scale could run for a week if we have few earthquakes, or it could compress to one particularly shaky afternoon. How to set the time axis so that all the quakes were present, without a historical gap opening up on quake-intensive days?
I solved this problem by using D3 to render the axes in response to the data range. The time axis looks at all the earthquakes, finds the one that was the longest ago, and plots all the earthquakes on the axis between that point and now; now being the time that your browser loads the page. The y-axis, which represents the depth of the quake, works the same way. It plots all the quakes on a scale of 0 to the deepest quake in the dataset.
Some of my beta-testers have asked me if it’s possible to see historical data on this visualisation; the answer is, perhaps one day. At the moment, the code that generates this visualisation is all client-side JavaScript, meaning it runs in your browser when you load the page. It can’t hold on to any data for future use. Geonet does make historical data available in CSV format, but to make use of it I’d need to build a backend for this app and create a database that updates itself from the API regularly. Watch this space!
Data is beautiful – Sarah