d3.js and Google Maps API in 11 easy steps

A recent challenge was to link data with longitude and latitude coordinates which I’d used when developing a training compliance dashboard. Here’s the final visualisation.

I’d worked with static Google Maps before but the client wanted to use live maps which responded to the content. Here’s how I did it in 10 easy steps with a huge amount of help from Mike Bostock’s starter code.

1. Step one — prepare your data. my_data is a list that contains longitude, latitude and any further variables you might need. You can reset the data and call the code again and the map will redraw within the appropriate boundaries.
2. Step two — declare the bounds.

3. Step three — extend the bound for each row in the data.

4. Step four — select the <div> or <td> where you want to place the map.

5. Step 5 — create the map and fit the bounds

6. Step 6 — declare an Overlay, an onAdd function and the append the layer.

7. Step 7 — within the onAdd Function, declare a draw function, set the Projection and then draw each marker appending the data.

8. Step 8— transform (see above) is a function to position each SVG

9. Step 9 — now draw the circles. You can add tooltip functionality if you want.

10. Step 10 — bind the overlay to the map.

11. Step 11 — finally, you need to set the CSS of the individual layers.

.layer, .layer svg {position: absolute;}

.layer svg { width: 60px; height: 60px; padding-right: 100px; font: 10px sans-serif;}

You can also set style attributes for .layer circle, either in CSS or in your D3.js code.