Earthquake!

This was a fun one. Originally inspired by this xkcd , I thought it might make for a fun little project to create a visualization of the propagation of tweets about a quake and the quake itself, and teach myself a bit about html5 animations in the process.

Mechanics

The basic goal here is to represent the spread of the initial quake, and twitter intensity of quake-related things after the fact. Just representing the quake as a radiating line seemed boring, so instead I represented the map as a series of small circles that radiate out as they're hit by the earthquake. To do this, an image has to be written to a canvas, converted to ImageArray an, then pulled apart into dots. This can work on any image (here's a pointillist take on my man George), but we'll be sticking with a traditional map.

The way the wave propagates is pretty straightforward. It starts at a given location on the map, then radiates outward at a fixed speed. The wave then adds some outward velocity to every dot it encounters, applying less and less power the farther it gets from the center. The specific mechanics of earthquake wave propagation can get hairy, so in the interest of my sanity and aesthetics I opted to make the dots behave like a spring:

The perfect spring made for an interesting display, but was a little overwhelming (for the morbidly curious) and isn't a particularly faithful interpretation of a real earthquake. So, I added what essentially amounts to a drag coefficient to make it more manageable:

I was fairly pleased with this, but it seemed too structured - something about earthquakes calls for discord. I found a source of it purely by accident - at one point I made a mistake in the velocity updates of the dots which caused them to drift a little off their primary paths. I liked the effect quite a bit, and reintroduced the bug.

And with that, we have the map in it's current incarnation. A full screen version can be found here; for those of us with weaker processors, a smaller version is recommended. You can start a quake with a click: the longer you hold it down, the more powerful it is.

Tweets?

As of yet, there's been an unfortunate lack of earthquakes to do any interesting tweet overlay. I did try to set up a python script to stream earthquake tweets, but even when there's no earthquake it quickly devoured my bandwidth. However, given that the US Geological Survey has taken to tweet analysis, I'm hoping I'll be able to get my hands on a decent sample following the next quake. It will require an upgrade to the map to take coordinates and allow color changes to dots to indicate tweet intensity, but it should be an interesting challenge.