Geography Map

[techniq]

Use cases

• Projections
  • https://observablehq.com/@d3/world-map
  • https://observablehq.com/@d3/orthographic?collection=@observablehq/maps
  • https://observablehq.com/@benjamesdavis/orthopgragic-map
  • https://observablehq.com/@floledermann/projection-playground
  • https://observablehq.com/@toja/magnifying-glass-projections?collection=@observablehq/maps
  • https://observablehq.com/@observablehq/plot-projections
  • https://observablehq.com/@d3/gs50
    • https://observablehq.com/@fil/modified-stereographic-gs50-glsl
  • https://observablehq.com/@paoyo1/projections
  • https://observablehq.com/@paoyo1/projection-miller
  • https://observablehq.com/@jashkenas/interpolating-d3-map-projections
  • http://mbostock.github.io/d3/talk/20111018/azimuthal.html
  • https://www.d3indepth.com/geographic/
  • https://observablehq.com/@sahilchinoy/tilted-projection
  • https://observablehq.com/@nikita-sharov/map-projection-classification?collection=@nikita-sharov/cartography
  • https://observablehq.com/@nikita-sharov/map-projection-chronology?collection=@nikita-sharov/cartography
  • https://observablehq.com/@nikita-sharov/map-projection-distortion?collection=@nikita-sharov/cartography
  • https://observablehq.com/@harrystevens/geosquare
  • Alaska Albers
  • https://docs.mapbox.com/mapbox-gl-js/guides/projections/
• Rendering contexts
  • SVG
  • Canvas
    • Consider updating primitives to render to canvas? How to handle scaleCanvas($ctx, $width, $height) and $ctx.clearRect(0, 0, $width, $height)
  • WebGL
• Clipping
  • https://observablehq.com/@d3/spherical-clipping (geoClipPolygon)
• Layers / Features (Country, States, Counties, etc)
  • https://observablehq.com/@bratter/us-map-examples
• Choropleth
  • https://observablehq.com/@d3/choropleth
  • https://observablehq.com/@enjalot/making-a-county-map
  • https://nivo.rocks/choropleth/
  • https://observablehq.com/@mbostock/where-the-seasons-are
  • https://observablehq.com/@d3/bivariate-choropleth?collection=@observablehq/maps
  • Choropleths, Four Ways
  • https://observablehq.com/@jake-low/how-well-does-population-density-predict-u-s-voting-outcome
  • https://observablehq.com/@clhenrick/us-county-population-density?collection=@clhenrick/datasets
  • https://observablehq.com/@observablehq/build-your-first-choropleth-map-with-observable-plot
  • https://observablehq.com/d/9483d84b0841192e
  • https://observablehq.com/@monitus/us-counties-population-change-2021
  • https://observablehq.com/@codingwithfire/choropleth-with-textures-js?collection=@codingwithfire/election-explorations
• Color
  • Colours for maps
• Tiles
  • https://observablehq.com/collection/@d3/d3-tile
  • https://observablehq.com/@d3/web-mercator-tiles
  • https://observablehq.com/@jjhembd/zoomable-map-with-tile-cache
  • https://observablehq.com/@d3/clipped-map-tiles
  • Raster & Vector IV
  • Location Map using d3-geo and d3-tile
  • https://observablehq.com/@jake-low/web-mercator-tile-visibility
  • https://observablehq.com/@jjhembd/pieces-of-a-map
  • https://observablehq.com/@neocartocnrs/d3-zoom-tiles-and-geojson
  • Vector tiles
    • https://observablehq.com/@jjhembd/vector-tile-rendering
    • https://observablehq.com/@jjhembd/vector-map-rendering
    • https://docs.mapbox.com/data/tilesets/guides/vector-tiles-standards/
    • https://observablehq.com/@d3/mapbox-vector-tiles
    • https://observablehq.com/@gallowayevan/life-expectancy
    • https://observablehq.com/@henrythasler/mapbox-vector-tile-dissector
    • https://github.com/GlobeletJS/vector-tile-esm
    • https://github.com/NelsonMinar/vector-river-map
    • https://www.mapzen.com/projects/vector-tiles/
    • GeoJSON as vector tiles
      • https://github.com/mapbox/geojson-vt
      • https://observablehq.com/@ananya-roy/adding-custom-layers-to-a-vector-map-with-geojson-vt
  • Caching
    • https://www.npmjs.com/package/tile-rack
    • https://observablehq.com/@jjhembd/zoomable-map-with-tile-cache
    • https://observablehq.com/@jjhembd/tile-cache-pruning
  • Edge buffering
    • http://www.tolon.co.uk/Leaflet.EdgeBuffer/comparison.html
  • Non-mercator projection
    • https://www.jasondavies.com/maps/tile/
    • https://observablehq.com/@mbostock/raster-reprojection-ii
    • https://stackoverflow.com/questions/56511299/re-project-web-mercator-tiles-to-arbitrary-projection-with-d3
    • https://www.mapbox.com/elections/albers-usa-projection-style
    • https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/here-are-some-equal-area-projected-maps-for-arcgis-online-and-how-to-make-them/
    • https://stackoverflow.com/questions/61824627/how-to-make-geoalbersusa-projection-straightnot-curved-like-geomercator
    • https://observablehq.com/@jjhembd/robust-raster-reprojection
    • Globe on zoom out via Adaptive Composite Map Projection maplibre/maplibre#161
    • https://observablehq.com/@fil/webmercator-to-globe?collection=@fil/glsl-projections
    • https://observablehq.com/@fil/albers-glsl
    • https://observablehq.com/@sorami/graticule-with-mapbox-maplibre-gl-js
    • Raster Reprojection
• Graticule / distortion reference
  • https://airbnb.io/visx/geo-mercator
  • https://airbnb.io/visx/geo-custom
  • https://nivo.rocks/geomap/
  • https://observablehq.com/@d3/tissots-indicatrix
  • Visualizing map distortion
  • https://www.visualcapitalist.com/mercator-map-true-size-of-countries/
  • https://observablehq.com/d/39005deaf90c19d6?collection=@categorise/utils-geo
• Bubble map
  • https://observablehq.com/@gallowayevan/bivariate-bubble-map
  • https://observablehq.com/@observablehq/darkcides-bats-in-caves
• Spike map
  • https://observablehq.com/@d3/spike-map
  • https://observablehq.com/@observablehq/darkcides-bats-in-caves
  • https://observablehq.com/@kushleshkumar/a-better-way-to-visualize-us-elections-2020-results
  • https://observablehq.com/@codingwithfire/population-change-by-county-2016-2018-bubble-lines?collection=@codingwithfire/election-explorations
  • https://www.visualcapitalist.com/us-cities-by-gdp-map/
  • https://observablehq.com/@yinshanyang/deck-gl-globe-tron
• Ridgeline
  • https://observablehq.com/@zechasault/maps-drawn-with-d3-ridgeline-plot
  • https://observablehq.com/@mendozaline/population-lines-map-dvs-edition
• Hexbin
  • https://observablehq.com/@d3/hexbin-map
  • https://observablehq.com/@larsvers/hexgrid-maps-with-d3-hexgrid?collection=@observablehq/maps
  • https://github.com/uber/h3-js
    • https://github.com/uber/geojson2h3
  • geoviz
    • https://riatelab.github.io/geoviz/global.html#tool/dotstogrid
    • https://riatelab.github.io/geoviz/tool_dotstogrid.js.html
• Grid
  • https://observablehq.com/@observablehq/observable-plot-grid-choropleth?collection=@observablehq/maps
  • https://observablehq.com/@gallowayevan/gridded-population-15-minute-united-states
• Grid heatmap
  • https://observablehq.com/@harrystevens/mapping-gridded-data-with-a-voronoi-diagram?collection=@observablehq/maps
  • https://observablehq.com/@climatelab/bird-trend-map
• Contour heatmap
  • https://observablehq.com/@efrymire/gridding-map-files
  • https://observablehq.com/@sahilchinoy/contour-map
  • https://observablehq.com/@efrymire/total-west-nile-virus-incidents-contour-density-map
  • https://vizhub.com/curran/f8ff684d310c40c9a7776980626d83d6?edit=files
  • https://observablehq.com/@observablehq/plot-us-water-vapor
• Clustering
  • https://github.com/Andrew-Reid/d3-marker-cluster
    • https://observablehq.com/@stardisblue/hello-d3-marker-cluster
  • https://github.com/Andrew-Reid/d3-fuse
  • https://turfjs.org/docs/#clustersDbscan
    • https://observablehq.com/@stardisblue/hello-turf-clustersdbscan?collection=@stardisblue/cluster-aggregation
• Force graph
  • https://observablehq.com/@benoldenburg/geo-force-graph-albers-usa-projection
• Zoom (with stroke scale)
  • https://observablehq.com/@bratter/us-map-examples
• Zoom to bounding box
  • https://observablehq.com/@d3/zoom-to-bounding-box
• Canvas zooming
  • https://observablehq.com/@john-guerra/d3-geopath-canvas-zoom-panning
• Selection / Brush
  • https://observablehq.com/@awhitty/fips-county-code-brush
  • Point-in-polygon
• Legend Scale
  • https://observablehq.com/@harrystevens/introducing-d3-geo-scale-bar
  • https://observablehq.com/@d3/choropleth
  • https://observablehq.com/@mbostock/where-the-seasons-are
  • https://observablehq.com/@d3/bivariate-choropleth?collection=@observablehq/maps
  • https://observablehq.com/d/ab5d7d5a5d9e9e16
  • https://nivo.rocks/choropleth/
• Path / curve
  • https://observablehq.com/@d3/sketchy-earth
  • https://observablehq.com/@d3/context-to-curve
  • https://observablehq.com/@nbremer/simplified-curved-earth-map?collection=@observablehq/maps
• Labels
  • https://observablehq.com/@veltman/centerline-labeling
  • https://observablehq.com/@fil/plot-voronoi-labels
  • https://github.com/Fil/d3-geo-voronoi
• Leaflet
  • https://bost.ocks.org/mike/leaflet/
  • https://observablehq.com/@sfu-iat355/intro-to-leaflet-d3-interactivity
  • https://github.com/bluehalo/leaflet-d3
• Globe
  • Dragging
    • https://observablehq.com/@d3/versor-dragging
    • https://observablehq.com/@michael-keith/draggable-globe-in-d3
    • https://observablehq.com/@jjhembd/coasting-around-the-globe
    • https://observablehq.com/@benoldenburg/simple-globe
  • Inertia drag
    • https://github.com/Fil/d3-inertia
      • https://observablehq.com/@fil/using-d3-inertia-with-observable
    • https://svelte.dev/repl/a3d2e4af263b4366adee27a7074b017e?version=4.2.12
    • https://github.com/shuding/cobe/blob/main/website/pages/docs/showcases/draggable.mdx?plain=1
  • Camera
    • https://observablehq.com/@jjhembd/tilting-the-satellite
    • https://observablehq.com/@d3/satellite
    • https://observablehq.com/@d3/world-tour
    • https://observablehq.com/@d3/satellite-explorer
  • Marks
    • https://observablehq.com/@emiliendupont/earthquake-3d-globe
    • https://observablehq.com/@armollica/globe-with-lofted-arcs
    • https://observablehq.com/@washpostgraphics/spike-globe
    • World Tour along Flying Arcs
    • https://observablehq.com/@benoldenburg/global-airline-routes
  • Style
    • https://observablehq.com/@visionscarto/dot-globe
    • https://observablehq.com/@fil/how-much-warmer-bbc
    • https://observablehq.com/@jrus/shaded-sphere-from-svg-gradient
    • https://observablehq.com/@d3/orthographic-shading
    • https://observablehq.com/@sahilchinoy/multidirectional-hillshader
    • https://observablehq.com/@visionscarto/pencil-globe
    • https://observablehq.com/@visionscarto/ascii-art-geography
    • https://observablehq.com/@visionscarto/hex-globe
    • https://observablehq.com/@visionscarto/hex-ndvi
    • https://observablehq.com/@mbostock/pixelated-world
    • https://observablehq.com/@mbostock/hexagonal-world
    • https://observablehq.com/@veltman/inner-glow?collection=@observablehq/maps
    • Floating Landmasses
    • https://cobe.vercel.app/
    • https://observablehq.com/@rkaravia/brick-mapper
  • Translucent globe
    • https://observablehq.com/@d3/projection-reflectx
    • https://observablehq.com/@jake-low/translucent-earth-satellite-projection
    • https://observablehq.com/@fil/translucent-earth
    • https://observablehq.com/@fil/translucent-earth-satellite-projection
• Mapbox integration
  • https://svelte.dev/tutorial/context-api
  • Add a polygon to a map using a GeoJSON source
  • Working with large GeoJSON sources in Mapbox GL JS
  • Load data from an external GeoJSON file
  • Choropleths, Four Ways
  • https://observablehq.com/@aboutaaron/mapbox-map-maker?collection=@observablehq/maps
  • https://observablehq.com/@mbostock/mapbox-fly-to?collection=@observablehq/maps
  • https://github.com/beyonk-adventures/svelte-mapbox
  • https://observablehq.com/@edhschen/mapbox-d3-guide
• MapLibre integration
  • https://maplibre.org/maplibre-gl-js-docs/example/
  • https://maplibre.org/maplibre-gl-js-docs/example/geojson-layer-in-stack/
• GlobeletJS integration
  • https://observablehq.com/@jjhembd/hello-globeletjs
• Ticks along path / draw along path
  • https://observablehq.com/@tomgp/techniques-for-visualising-data-along-wobbly-lines
• Topographic Mapping
• GeoJSON drawing
  • https://github.com/mapbox/mapbox-gl-draw
    • https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/
  • https://terradraw.io/
    • https://github.com/JamesLMilner/terra-draw
  • https://www.geoman.io/

Examples

• US State names
  • https://observablehq.com/@katossky/add-centroids-on-a-state-map-of-the-united-states-of-america
  • https://layercake.graphics/example/MapLayered
• US State Capitals
• US State County Map
• World Elevation Line Map
• Timezones
  • Time Zones
  • Daylight Saving Time Gripe Assistant Tool
  • https://www.timeanddate.com/time/map/
  • https://dayspedia.com/time-zone-map/-18000/
  • Solar Oscillator
  • Solar Terminator
• Draggable World Map Coordinates Input
• Zip codes
  • https://pbogden.github.io/single/data/zips.json
  • USA ZIP Code Boundaries(https://www.arcgis.com/home/item.html?id=d6f7ee6129e241cc9b6f75978e47128b)
• Health Outcomes at the Zipcode level
• https://observablehq.com/@vasturiano/satellites-voronoi
• Animation / Timeline
  • https://observablehq.com/@brandonh-google-com/covid-19-cumulative-deaths-per-thousand-us-counties
  • https://observablehq.com/@monitus/animate-dot-marks-with-plot
  • https://observablehq.com/@jashkenas/united-states-coronavirus-daily-cases-map-covid-19
  • https://observablehq.com/@kickout/usda-nass-map-extra-statistics
  • https://observablehq.com/@parkerziegler/animating-maps-by-centroid-sorting
• https://observablehq.com/@tristen/how-many-counties-share-the-same-name
• https://observablehq.com/@mcmcclur/hierarchical-structure-of-the-us-regions
• Fixed location Network Graph
• Hierarchical Structure of the US Regions
• US map drilldown / toggle
  • Country
  • Region
  • State
  • County
  • Zip code
    • USA ZIP Code Boundaries
    • https://simple.wikipedia.org/wiki/List_of_ZIP_Code_prefixes
    • https://faq.usps.com/s/article/ZIP-Code-The-Basics
    • https://en.wikipedia.org/wiki/ZIP_Code
    • https://d3og.com/mbostock/5180185/
  • Core-Based Statistical Area (Metro area)
    • example
    • example 2
  • Hospital Referral Region (HRR)
    • example
    • https://data.dartmouthatlas.org/supplemental/
• https://observablehq.com/@neocartocnrs/night-and-day
• https://observablehq.com/@neocartocnrs/ridge-lines
• https://observablehq.com/@awoodruff/lineworld
• https://observablehq.com/@visionscarto/five-oceans-topojson
• https://observablehq.com/@severo/download-the-shape-of-a-country
• https://observablehq.com/@xoolive/disputed-territories
• https://hanshack.com/geotools/
• https://observablehq.com/@ktrudeau/2023-fire-weather-days

Other libraries

• https://observablehq.com/@observablehq/plot-mapping
  • https://observablehq.com/@ambassadors/plot-geo-gotchas
• https://github.com/neocarto/bertin
  • https://observablehq.com/collection/@neocartocnrs/bertin

Reference

• https://github.com/d3/d3-geo
• https://observablehq.com/@uwdata/cartographic-visualization
• https://observablehq.com/@observablehq/us-geographic-data
• https://observablehq.com/@d3/u-s-map-canvas
• https://observablehq.com/@d3/u-s-state-capitals
• LayerCake
  • Map Components
  • Map (svg, tooltip, pre-projected)
  • Multilayer map (canvas + svg)
• https://svelte.dev/repl/33d086ab38fb42c48c39bd5f191fb890?version=3.46.6
• https://observablehq.com/@d3/context-to-curve?collection=@d3/d3-geo (examples on side)
• https://observablehq.com/@mbostock/geojson-viewer
• https://observablehq.com/@d3/u-s-airports-voronoi
• https://observablehq.com/@deaxmachina/collection-of-maps
• https://observablehq.com/@chrispahm/render-geojson-into-svg
• Collaborative Mapmaking with Observable in JavaScript
• https://observablehq.com/@hrbrmstr/2022-30-day-map-challenge-day-02-lines-of-sedition?collection=@hrbrmstr/2022-30-day-map-challenge
• Make a Map with geoJSON!
• US Roads
  • US Road Map
  • US Road Map II
  • https://geodata.lib.utexas.edu/catalog/stanford-tq511pr5084
• https://openlayers.org/
  • https://observablehq.com/@mbostock/hello-openlayers?collection=@observablehq/maps
  • https://observablehq.com/@pbogden/d3-openlayers
• https://observablehq.com/@d3/solar-terminator?collection=@observablehq/maps
• https://observablehq.com/@floledermann/drawing-maps-from-geodata-in-d3?collection=@observablehq/maps
• https://observablehq.com/@mbostock/walmarts-growth?collection=@observablehq/maps
• https://observablehq.com/@mcmcclur/zillow-home-prices?collection=@mcmcclur/economics
• https://observablehq.com/@mcmcclur/hierarchical-structure-of-the-us-regions?collection=@mcmcclur/maps
• https://observablehq.com/@karimdouieb/us-house-election-2022
• https://www.geoapify.com/mapbox-gl-new-license-and-6-free-alternatives
• https://observablehq.com/@neocartocnrs/hello-geotoolbox?collection=@neocartocnrs/geotoolbox
• Command-Line Cartography, Part 1
• https://observablehq.com/@anwarhahjjeffersongeorge/dealing-with-too-much-data
• https://observablehq.com/@jeffreymorganio/random-coordinates-within-a-country
• great circle wrapping
• State borders, from 1886 to today
• https://observablehq.com/@mbostock/methods-of-comparison-compared
• Lat Lon or Lon Lat?
• https://observablehq.com/@fil/dynamic-simplification
• https://observablehq.com/@nikita-sharov/natural-earth-scales?collection=@nikita-sharov/cartography
• https://www.jasondavies.com/
• https://observablehq.com/@enjalot/us-county-visualization-ideas

Globe (3D)

• https://observablehq.com/@d3/versor-dragging?collection=@observablehq/maps
• https://observablehq.com/@mbostock/top-100-cities
• https://observablehq.com/@mbostock/geojson-in-three-js
• https://observablehq.com/@jake-low/satellite-ground-track-visualizer
• https://observablehq.com/@ankitak/stars
• https://observablehq.com/@jashkenas/urbano-montes-planisphere-1587?collection=@observablehq/maps
• https://observablehq.com/@d3/testing-projection-visibility