-
-
Notifications
You must be signed in to change notification settings - Fork 36
Open
Description
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/@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)
- 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)
- 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
- Caching
- Edge buffering
- 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
- 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
- Hexbin
- Grid
- Grid heatmap
- 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
- Force graph
- Zoom (with stroke scale)
- Zoom to bounding box
- Canvas zooming
- Selection / Brush
- 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
- Labels
- Leaflet
- Globe
- Dragging
- Inertia drag
- Camera
- Marks
- 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
- 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
- GlobeletJS integration
- Ticks along path / draw along path
- Topographic Mapping
- GeoJSON drawing
Examples
- US State names
- US State Capitals
- US State County Map
- World Elevation Line Map
- Timezones
- Draggable World Map Coordinates Input
- Zip codes
- 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
- Core-Based Statistical Area (Metro area)
- Hospital Referral Region (HRR)
- 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
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
- https://openlayers.org/
- 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
Reactions are currently unavailable