When I first started working in logistics I heard the phrase ‘vendor deconsolidation’ frequently. I ignored the ‘de’ and automatically thought this was simply the process of a retailer getting rid of some of its vendors (it’s not). When I was asked to quote a price for a ‘deconsol’ opportunity (it’s my job to price new business), I figured I’d be giving myself an in-depth lesson on what the phrase actually meant. Instead, I got an even deeper lesson on how to create an interactive map with the JavaScript data visualization library D3.
The attachment that came in the initial email was a list of shipment locations — mostly in the northeast US but also in Florida, Tennessee, and Arkansas. Great opportunity for a map. I opted out of my default map making resources like GoogleMaps or Arc GIS for something a bit more elegant. With some working knowledge of JavaScript I started browsing through examples of D3 maps. I know I wanted this map of the US to be zoomable and display points for each city along with how much total weight would be shipped to that city.
Getting a basic map to display on the screen was a huge win. Just for reference, I completely bombed on Mike Bostock’s Let’s Make a Map tutorial… I just couldn’t get through it. But, luckily, a lot of the files that were being created and manipulated in that tutorial are available somewhere on the web, I just needed to find them. Using this example as a template, I arrived at a sharp, zoomable map of the US with circles indicating each destination city (I ended up using a different zoom style). Next, tooltips.
Displaying the tooltips was easy – getting them to display when a user zoomed in was fucking painful. I used tons of resources and many hours to try and figure out why when I zoomed in, the tooltips would die. Everything worked great on my local copy and on bl.ocks.org, but not inside this WordPress blog. In fact, I wrote those last three sentences in past tense, but I’m still working on this. In the mean time, I’ve displayed the current broken version below as a reference while I’m looking for this last piece of the puzzle.
It turns out that in this instance the map was not very useful for understanding vendor deconsolidation or how to price the opportunity. In fact, this cross-dock wikipedia site combined with aggregated data tables and some summary statistics were enough to get me started. But, I think I’m more excited about the map…
Resources:
http://bl.ocks.org/mbostock/2206590
http://bl.ocks.org/mbostock/6123708
http://techslides.com/d3-world-maps-tooltips-zooming-and-queue/