This document discusses linking D3 with Google Maps to allow plotting of data on a map. It explains that Google Maps is highly customizable through style sheets. Linking the two involves drawing D3 elements in a Google Maps overlay, which provides the projection to convert longitude and latitude to x,y coordinates for plotting. The tutorial shows how to initialize a Google map, create an overlay, add D3 SVG elements to the overlay, and use the projection to plot data with standard D3 drawing while leveraging Google Maps panning and zooming.

1. D3 + Google Maps
Jeff Allen, Jon Roberts

2. Styling Google Maps
• Google maps colors
– Great for readability
– Horrible to plot over

3. Styling Google Maps
• Fortunately, highly customizable!
• Style sheet effects
– Remove labels
– Remove icons
– Change colors
• http://www.dwzone-it.com/StyledMapWizard/StyledMapWizard.asp
• Or “google maps style wizard”

4. Styling Google Maps

5. Linking Google Maps and D3
• Basic necessities for D3 map
– Div to draw in
– Coordinate transformation/projection
• Provided by standard mapping APIs!
• Here, Google Maps will give us
– “Overlay” div to draw in
– Lon,Lat -> Div x,y
• D3 plays nicely with Google Maps
– Easy to link Google projection to D3 path()
– Standard D3 drawing
– Google Maps automatically pans and zooms map
• Useful tutorial: http://bl.ocks.org/mbostock/899711

6. Plotting Flow with Google Maps
Google D3
Create standard Google Map
Create Google Map overlay
Create D3 SVG elements in overlay
Get Google Map projection
Standard D3 plotting

7. Initialization

8. Initialization
Create Google map and initialize

9. Initialization
Create overlay and initialize

10. Initialization
Create D3 SVG elements

11. Drawing

12. Drawing
Get current projection for Google map

13. Drawing
Simple function to
translate Google->D3! 

14. Drawing
Standard D3 plotting!