Topographic MappingBubble mapChoroplethAccess to Family planningMD Counties Total Cases MapTendance de la production des déchets en Union EuropéenneAndy's Walgreens COVID-19 Tracker TrackerElection Maps for Incomplete ResultsA better U.S. house election results map?1983 Mayoral Election, Dot density mapsMastodon 🐘Cheat sheet bertinBertin.js: regular squaresWaterlinesNeumorphism Contour Density MapCartographic DoodlesStars and constellationsPlot: Grid choroplethHello Polygon MorphingMapping with pie chartsU.S. Geographic DataHow big are countries... like really!AttitudeB&W ChoroplethWeb Mercator Tile VisibilityMARTINI: Real-Time RTIN Terrain Mesh"Magnifying-Glass" projectionsTissot's indicatrixAntipodal mapMapping gridded data with a Voronoi diagramA Map of Every BuildingUrbano Monti’s Planisphere (1587)Bivariate choroplethDIY HillshadeMapbox Map MakerWorld tourHillshaderSimplified Earth with curved shapesHexbin mapInner glowNicolosi vs. StereographicData-driven projections: Darwin's worldSatellite ground track visualizerDirection to shoreHello, OpenLayers!U.S. airports VoronoiHello, NYC Geosearch API!Mapbox Fly-ToSpilhaus shoreline mapWalmart’s growthHow well does population density predict U.S. voting outcomes?Drawing maps from geodata with D3 & ObservableHexgrid maps with d3-hexgridTissot's indicatrixSwiss Elevation Line GraphsVector tilesVersor draggingOrthographicSolar TerminatorStreaming ShapefilesFake GlobesPeirce Quincuncial🍃 LeafletU.S.G.S. World Earthquake MapUsing Mapbox GL JSUsing Google Maps
World airports Voronoi
chart = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(mutable projection, context).pointRadius(1.5);
function render() {
context.clearRect(0, 0, width, height);
context.beginPath();
path(graticule);
context.lineWidth = 0.5;
context.strokeStyle = "#aaa";
context.stroke();
context.beginPath();
path(mesh);
context.lineWidth = 0.5;
context.strokeStyle = "#000";
context.stroke();
context.beginPath();
path(sphere);
context.lineWidth = 1.5;
context.strokeStyle = "#000";
context.stroke();
context.beginPath();
path({type: "MultiPoint", coordinates: points});
context.fillStyle = "#f00";
context.fill();
}
function dragged() {
mutable projection = mutable projection;
render();
}
return d3.select(context.canvas)
.call(drag(mutable projection).on("drag.render", dragged))
.call(render)
.node();
}
mutable projection = d3.geoOrthographic()
.fitExtent([[1, 1], [width - 1, height - 1]], sphere)
.rotate([0, -30])
height = width
sphere = ({type: "Sphere"})
graticule = d3.geoGraticule10()
points = (await FileAttachment("airports.csv").csv({typed: true})).map(({longitude, latitude}) => [longitude, latitude])
mesh = d3.geoVoronoi(points).cellMesh()
d3 = require("d3@7", "d3-geo-voronoi@2")
import {drag} with {d3} from "@d3/versor-dragging"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
