- Project kickoffs
- Data join, d3-geo
- Choropleth (adding interaction with D3)
- See projects.md
Introduction to data-join with d3-selection
- Update projects with project teams as the rest of the class does the exercises
- Exercises are based on the choropleth
Introduction to d3-geo and mapping with D3
- d3-geo -- the collection
- choropleth.md
Work with State Choropleth
- Exercise #1: Add a circle that follows the mouse
- Use d3.pointer
d3.pointer(event)is part of d3-selection
- Get hints from Plot Tooltip
- Use d3.pointer
- Exercise #2: Update the styling to highlight the state that's being moused over
- Again, get hints from here: Plot Tooltip
- d3.select() -- tells you about
this
- Exercise #3: Tooltip
- Add a tooltip that shows the data value as it follows the mouse
- Get hints from here: Plot Tooltip
- You'll need to add a text element, and get the data from the selected element
- Solutions are here: choropleth.md
We're using topojson data, which has various features in addition to being efficient
- topojson -- github
- topojson.neighbors
- merging states -- bl.ocks.org
- merging states II -- bl.ocks.org
- careful rendering of selected states
- filter geojson objects
- Note that the topojson on State Choropleth is pre-projected
- You can see this by examining the GeoJSON
- This can be problematic depending on your application
d3-geo includes a variety of geospatial tools
- This is where the projections live
- There's also projection.invert if the projection is invertible
- ZIP codes shows one way to use projection
- d3-geo spherical math has other capabilities
- d3.GeoAlbersUsa requires scale and translate
- With the projection, you can do all sorts of things
- For example: d3.geoContains(object, point)
- My U.S. Map (SVG)
- If you know the projection, you're in good shape
- Unprojected GeoJSON with metadata -- this may be a bit easier to work with
- My U.S. Map (Canvas)
You can stream shapefiles with the shapefile library
- shapefile -- github
- streaming shapefiles
With d3-tile, you can easily integrate a variety of map-tile services
- d3-tile -- the collection
- DC schools
- This has a variety of selectable tile services
There are many different slippy map libraries -- the most popular open source library is Leaflet.
- Hello, Leaflet
- Hello, Mapbox GL
- Hello, OpenLayers
- The original: D3 + Leaflet published in 2012 -- bost.ocks.org
- D3 & Leaflet -- my attempt to implement the original
- Uses d3-geo stream to link between Leaflet & D3
EDA with D3 and Plot -- review the solutions