nyc open data meetup--d3.js workshop ii make beautiful maps
DESCRIPTION
NYC Data Science Academy, NYC Open Data Meetup, Big Data, Chief Data Scientist, d3.jsTRANSCRIPT
![Page 1: NYC Open Data Meetup--D3.js workshop ii make beautiful maps](https://reader035.vdocuments.site/reader035/viewer/2022062513/554bc12cb4c90530298b5116/html5/thumbnails/1.jpg)
D3 + Google Maps
Jeff Allen, Jon Roberts
![Page 2: NYC Open Data Meetup--D3.js workshop ii make beautiful maps](https://reader035.vdocuments.site/reader035/viewer/2022062513/554bc12cb4c90530298b5116/html5/thumbnails/2.jpg)
Styling Google Maps• Google maps colors– Great for readability– Horrible to plot over
![Page 3: NYC Open Data Meetup--D3.js workshop ii make beautiful maps](https://reader035.vdocuments.site/reader035/viewer/2022062513/554bc12cb4c90530298b5116/html5/thumbnails/3.jpg)
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”
![Page 4: NYC Open Data Meetup--D3.js workshop ii make beautiful maps](https://reader035.vdocuments.site/reader035/viewer/2022062513/554bc12cb4c90530298b5116/html5/thumbnails/4.jpg)
Styling Google Maps
![Page 5: NYC Open Data Meetup--D3.js workshop ii make beautiful maps](https://reader035.vdocuments.site/reader035/viewer/2022062513/554bc12cb4c90530298b5116/html5/thumbnails/5.jpg)
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
![Page 6: NYC Open Data Meetup--D3.js workshop ii make beautiful maps](https://reader035.vdocuments.site/reader035/viewer/2022062513/554bc12cb4c90530298b5116/html5/thumbnails/6.jpg)
Plotting Flow with Google Maps
Google D3Create standard Google Map
Create Google Map overlay
Create D3 SVG elements in overlay
Get Google Map projection
Standard D3 plotting
![Page 7: NYC Open Data Meetup--D3.js workshop ii make beautiful maps](https://reader035.vdocuments.site/reader035/viewer/2022062513/554bc12cb4c90530298b5116/html5/thumbnails/7.jpg)
Initialization
![Page 8: NYC Open Data Meetup--D3.js workshop ii make beautiful maps](https://reader035.vdocuments.site/reader035/viewer/2022062513/554bc12cb4c90530298b5116/html5/thumbnails/8.jpg)
InitializationCreate Google map and initialize
![Page 9: NYC Open Data Meetup--D3.js workshop ii make beautiful maps](https://reader035.vdocuments.site/reader035/viewer/2022062513/554bc12cb4c90530298b5116/html5/thumbnails/9.jpg)
Initialization
Create overlay and initialize
![Page 10: NYC Open Data Meetup--D3.js workshop ii make beautiful maps](https://reader035.vdocuments.site/reader035/viewer/2022062513/554bc12cb4c90530298b5116/html5/thumbnails/10.jpg)
Initialization
Create D3 SVG elements
![Page 11: NYC Open Data Meetup--D3.js workshop ii make beautiful maps](https://reader035.vdocuments.site/reader035/viewer/2022062513/554bc12cb4c90530298b5116/html5/thumbnails/11.jpg)
Drawing
![Page 12: NYC Open Data Meetup--D3.js workshop ii make beautiful maps](https://reader035.vdocuments.site/reader035/viewer/2022062513/554bc12cb4c90530298b5116/html5/thumbnails/12.jpg)
DrawingGet current projection for Google map
![Page 13: NYC Open Data Meetup--D3.js workshop ii make beautiful maps](https://reader035.vdocuments.site/reader035/viewer/2022062513/554bc12cb4c90530298b5116/html5/thumbnails/13.jpg)
DrawingSimple function to translate Google->D3!
![Page 14: NYC Open Data Meetup--D3.js workshop ii make beautiful maps](https://reader035.vdocuments.site/reader035/viewer/2022062513/554bc12cb4c90530298b5116/html5/thumbnails/14.jpg)
Drawing
Standard D3 plotting!