Spilhaus shoreline mapNew Jersey State PlaneCustom cartesian projectionU.S. state choroplethWorld choroplethSpike mapBubble mapChoroplethRotating orthographicWinding orderOrthographic shadingSolar TerminatorU.S. airports VoronoiStar mapSolar pathRaster tilesThreshold ChoroplethMapbox Vector TilesRaster Tiles (Canvas)Raster & vector IIClipped map tilesGraticule labels (stereographic)Sketchy EarthCloud ContoursCountries by AreaVector fieldRaster & vectorVector tilesHexbin mapAntimeridian CuttingWorld AirportsWorld Airports DelaunayWorld airports Voronoiprojection.reflectXTesting projection visibilityNon-contiguous cartogramVersor ZoomingThree-Axis RotationContext to CurveOrthographic to equirectangularU.S. Map with Puerto RicoProjection TransitionsZoom to bounding boxZoomable Raster & VectorWorld Map (SVG)Web Mercator tilesU.S. Map (Canvas)Bivariate choroplethTissot’s indicatrixProjection comparisonCassiniWorld tourU.S. State CapitalsWorld map (canvas)U.S. MapConic Equal-AreaTransverse MercatorVersor draggingStereographicGnomonicOrthographicMercatorAzimuthal Equal-AreaAzimuthal EquidistantEquirectangularConic ConformalTobler–MercatorConic EquidistantNatural EarthEqual EarthOrthographic (SVG)Quantile Choropleth
Oceans
chart = {
const width = 960;
const height = 960;
const speed = 0.004;
const sphere = {type: "Sphere"};
const graticule = d3.geoGraticule10();
const context = DOM.context2d(width, height);
const projection = d3.geoOrthographic().fitExtent([[4, 4], [width - 4, height - 4]], sphere);
const path = d3.geoPath(projection, context);
while (true) {
projection.rotate([speed * performance.now(), -15]);
context.clearRect(0, 0, width, height);
context.save();
context.beginPath();
projection.precision(0);
path(ocean);
context.globalAlpha = 0.5;
context.fillStyle = "steelblue";
context.fill();
context.beginPath();
projection.precision(0.5);
path(graticule);
context.globalAlpha = 0.5;
context.strokeStyle = "#fff";
context.stroke();
context.beginPath();
path(sphere);
context.lineWidth = 2;
context.strokeStyle = "#000";
context.stroke();
context.restore();
yield context.canvas;
}
}
ocean = topojson.feature(topology, topology.objects.ocean)
topology = FileAttachment("ocean-110m.json").json()
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.
