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.
Data is beautiful – Sarah
Sarah blogs about how data can be made aesthetic at as well as informative.
Want to read more? Try… Strugglin’ with plugins or more from Sarah.
We run regular business intelligence courses in both Wellington and Auckland.