Visualizing Visits

Posted on Thursday, 14 Mar 2013.

Recently I got a chance to play around with Mike Bostock's D3 JS and Leaflet JS as I had to implement a geo visualization at MineWhat. This is what I achieved in a couple of days with no prior experience of handling geographical data via javascript.

Visualizing Visits on aakashgoel.com since 1/1/11

I had this idea couple of months back so without researching even a bit, I asked the lazy web for a solution.

This idea kind of passed until I had to deal with it yet again, at work! The task sounded simple. Allow the client to connect his Google Analytics account with our product and to start with, show the user visits on a map. Google has an amazing API documentation for the Core Reporting API and it's pretty quick to start with it.

I was too much into D3 for the past few days so thought of building the whole map zoom in and out functionality by myself using data from Natural Earth and then parsing it to geoJSON using ogr2ogr. The shape files given by Natural Earth are of amazing resolution. Quantum GIS for Ubuntu comes in very handy to preview the shape files and to decide which attributes to keep for geoJSON. But, with great resolutions, comes great bytes. Each geoJSON file crossed past 10MB. Another project by Mike Bostock called as topoJSON which encodes the topology came in very handy. It reduces the file size by close to 80%.

The whole building by myself thing turned out to be very difficult because of the amount of preprocessing required at the client level for each zoom in, zoom out. So, I scrapped the whole idea of reinventing the wheel and decided to go with Leaflet JS which surprisingly is an Open Source Project.

The amount of learning in this process was amazing. Hit me up on twitter if you would like to see a working demo of the whole thing. It's a work in progress but I would love to share some insights.

Cheers!