roadtolarissa

Adam Pearce

Meteor Map

An interactive map made for visualizing.org’s Meteorites contest.

I started from ‘scratch’ with a blank map of the world generated by d3. Each meteor in the contest data set had a latitude and longitude, so I used those coordinates to plot a small circle on the map to represent each impact. After coloring the circles orange, the map looked almost like the one above.

Most of the ~30 hours I’ve spent working on this map were spent adding some of these small improvements:

• Circle size and color proportional to meteor mass
  The data set also included the meteors’ mass. I initially tried to make each circle’s radius proportional to the square root of the mass so each pixel of circle would correspond to some amount of mass. Because of the masses of meteors varied so much the largest were too big and smallest were too small to see. After playing around with exponents smaller than 1/2, I eventually switched to logarithmic scaling. This gets rid of any simple correspondence between a circle’s area and mass, but fits the data much better. Glancing at the histogram, it appears that the distribution of masses is approximately log-normal.
• Mouseover effects
  
  The data set had some additional information that I wasn’t sure how to represent graphically. To keep that information accessible and make the map interactive, I added it to a mouseover tooltip. Each meteor also had a URL pointing to its meteorological society page which was used to create an onclick event for the circles. The pages had pictures of meteors which I used to create thumbnail previews. This went fairly smoothly until I tried to upload the images to my webserver. I was using meteor name as the filename and some of them had unicode characters which resulted in weird errors that were difficult to diagnose.
• Crossfilters
  To make the map even more interactive, I incorporated the year and mass data into histogram crossfilters. I’ve used the crossfilter library indirectly before, through dc.js which has several chart types premade. Getting the circles on the map to change with transitions went beyond what dc.js can do out of the box and I had to get my hands dirty with the actual crossfilter library. The messiness of the code I ended up with reflects that - I’m getting closer to doing things correctly, but I’m not quite there yet.

Ultimately, I ended up with a presentation pretty close to Javier de la Torre’s:

I think my version has a number of improvements (obviously, I just finished making it!) – the better looking tooltips which active on mouseover not on click, the crossfilters, dotmap instead of heatmap (I really don’t like what happens to their contiguous areas on zoom) - but Torre apparently made his in only 30 minutes. I don’t regret the additional time spent on mine since most of it was spent learning, but cartodb or fusion tables look like they would be the appropriate tool to use the vast majority of the time. I am a little frustrated I wasn’t able to do more with the flexibility of d3 - the only other published entry for the contest I’ve seen, bolid.es, is stunning – and I’m looking forward to seeing what else gets made.