Some examples on how to combine Mapbox GL JS and d3.js for creating interactive geovisualizations.
- If you want to keep your code clean: mapbox for map rendering, d3 for data handling and data visualization, CSS for styling.
- If you want to animate or transform your geovisualization easily without struggling with Mapbox's interminable data structures
- If you want to transition between the map and other views (small multiples, schematic data representations, etc.)
Using points is not a big deal. But rendering large or complex shapes with d3 will slow down your map transitions when zooming, panning, etc. (for each map update event, the map has to reproject all shape coordinates to the new map state). Some workarounds are:
- Simplify the shapes before rendering them with tools like mapshaper or libs like turf.js
- Hide the d3 shapes on map move, so as they don't have to be updated for each "map move". On release, update the shapes to the current map state, and show them again (example coming soon). – If you work with huge vector or raster data, consider using map tiles instead of d3.