D3.js animated map visualization

Update:

To create your own visualization like this, check out my project Datamaps.

When you walk into Bazaarvoice’s office in Austin, TX, you can’t miss a giant screen in the main lobby displaying some interesting metrics regarding our business.

Part of that display is an SVG map of the world using D3.js (♥ d3.geo), and all day long we’re watching it connect the people that ask questions on our client’s sites to the people that answer them.

The visualization we made takes a series of data, including the time and geolocations of the questioners and answerers. I animate an arc connecting to connect the two points.

Drawing a world map in D3.js:

(function(window) { var data, xy = d3 .geo .equirectangular() .scale($('#map_container').width()) .translate([$('#map_container').width() / 2, $('#map_container').height() / 2]), path = d3 .geo .path() .projection(xy), svg = d3 .select('#map_container') .append('svg:svg'), countries = svg .append('svg:g') .attr('id', 'countries'); /* World Map */ countries.selectAll('path') .data(window.countries_data.features) // get the data here: https://gist.github.com/2969317 .enter() .append('svg:path') .attr('d', path) .attr('fill', 'rgba(29,91,85,1)') .attr('stroke', 'rgba(29,91,85,1)') .attr('stroke-width', 1); }(this);

Grab the world data json data here

D3.js allows us to use pure latitude/longitude coordinates the entire time. From drawing the map to pinpointing the location of the users, we never have to figure out the X/Y coordinates on the map. Major win.

Mark DiMarco

UI Developer at Bazaarvoice

D3.js Animated Map Visualization

Update:

Disclaimer: The views / words expressed in this post are my own and not representative of my employer