Spilhaus shoreline mapNew Jersey State PlaneCustom cartesian projectionU.S. state choroplethWorld choroplethSpike mapBubble mapChoroplethRotating orthographicOceansOrthographic 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
Winding order
poly1 = ({type: "Polygon", coordinates: [[[0, 0], [0, 10], [10, 10], [10, 0], [0, 0]]]})
poly2 = ({type: "Polygon", coordinates: [[[0, 0], [10, 0], [10, 10], [0, 10], [0, 0]]]})
function preview(poly) {
return Plot.plot({
projection: {
type: "orthographic",
rotate: [-20, -20],
inset: 1
},
marks: [
Plot.geo(poly, {fill: "red", fillOpacity: 0.5}),
Plot.graticule({strokeOpacity: 0.3}),
Plot.line(poly.coordinates[0], {marker: "arrow"}),
Plot.sphere({strokeWidth: 2})
]
});
}
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.
