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-ToWalmart’s growthHow well does population density predict U.S. voting outcomes?Drawing maps from geodata with D3 & ObservableHexgrid maps with d3-hexgridTissot's indicatrixWorld airports VoronoiSwiss Elevation Line GraphsVector tilesVersor draggingOrthographicSolar TerminatorStreaming ShapefilesFake GlobesPeirce Quincuncial🍃 LeafletU.S.G.S. World Earthquake MapUsing Mapbox GL JSUsing Google Maps
Spilhaus shoreline map
map = {
const width = 928;
const height = width;
const context = DOM.context2d(width, height);
const projection = d3.geoStereographic()
.rotate([95, 45])
.translate([width / 2, height / 2])
.scale(width / 10.1)
.center([30, -5])
.clipAngle(166);
const path = d3.geoPath(projection, context);
const land = topojson.feature(world, world.objects.land);
context.lineJoin = "round";
context.lineCap = "round";
context.fillStyle = "#fff";
context.fillRect(0, 0, width, height);
context.beginPath();
path({type: "Sphere"});
path(land);
context.lineWidth = 0.5;
context.stroke();
context.clip("evenodd");
context.save();
context.beginPath();
path(land);
context.filter = "blur(12px)";
context.fillStyle = "#aaa";
context.fill("evenodd");
context.restore();
context.beginPath();
path(d3.geoGraticule10());
context.globalAlpha = 0.2;
context.strokeStyle = "#000";
context.stroke();
return context.canvas;
}
world = FileAttachment("land-50m.json").json()
d3 = require("d3-geo@1")
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.
