layerchart
layerchart copied to clipboard
techniq
Geography Map
Use cases
- [x] 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
- [x] SVG
- [x] Canvas
- Consider updating primitives to render to canvas? How to handle
scaleCanvas($ctx, $width, $height)and$ctx.clearRect(0, 0, $width, $height)
- Consider updating primitives to render to canvas? How to handle
- [ ] WebGL
- [ ] Clipping
- https://observablehq.com/@d3/spherical-clipping (geoClipPolygon)
- [ ] Layers / Features (Country, States, Counties, etc)
- https://observablehq.com/@bratter/us-map-examples
- [x] 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
- [ ] 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
- https://github.com/maplibre/maplibre/discussions/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
- [x] 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
- [x] Bubble map
- https://observablehq.com/@gallowayevan/bivariate-bubble-map
- https://observablehq.com/@observablehq/darkcides-bats-in-caves
- [x] 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
- https://github.com/Andrew-Reid/d3-marker-cluster
- [ ] Force graph
- https://observablehq.com/@benoldenburg/geo-force-graph-albers-usa-projection
- [x] Zoom (with stroke scale)
- https://observablehq.com/@bratter/us-map-examples
- [x] Zoom to bounding box
- https://observablehq.com/@d3/zoom-to-bounding-box
- [x] 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
- [x] 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/
- [x] 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
- https://github.com/Fil/d3-inertia
- [ ] 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
- [x] 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
- [ ] Dragging
- [ ] 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/
- https://github.com/mapbox/mapbox-gl-draw
Examples
- [x] US State names
- https://observablehq.com/@katossky/add-centroids-on-a-state-map-of-the-united-states-of-america
- https://layercake.graphics/example/MapLayered
- [x] US State Capitals
- [x] US State County Map
- [ ] World Elevation Line Map
- Timezones
- [x] 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)
-
Hospital Referral Region (HRR)
- example
- https://data.dartmouthatlas.org/supplemental/
- [x] 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
- 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
