The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Observable PlotMarks and ChannelsScalesAxesTransformsFacetsLegendsProjectionsArea MarkArrow MarkAuto MarkBar MarkBox MarkCell MarkContour MarkDelaunay MarkDensity MarkDot MarkImage MarkGeo MarkLine MarkLinear Regression MarkLink MarkRaster MarkRect MarkRule MarkText MarkTick MarkTree MarkVector MarkFrame MarkGroup TransformBin TransformStack TransformMap TransformWindow TransformSelect TransformInterval TransformDodge TransformCentroid TransformHexbin TransformShorthandMappingPlot from ggplot2Plot for Matplotlib Users: Overview
Extended Projections
globe = Plot.marks([Plot.graticule(), Plot.geo(land, {fill: "currentColor"}), Plot.sphere()])
globe.plot({
width: 928,
height: 464,
projection: d3.geoPolyhedralWaterman().rotate([20, 0]).fitExtent([[0, 0], [928 - 1, 464]], { type: "Sphere" }),
caption: "A butterfly projection inspired by Steve Waterman."
})
globe.plot({
width,
height: width / 3,
facet: {data: ["facet 1", "facet 2"], x: d => d},
projection: ({ width, height }) =>
d3.geoBaker().fitSize([width, height], { type: "Sphere" }),
caption: "A butterfly projection inspired by Steve Waterman."
})
globe.plot({
width: 928,
height: 464,
insetRight: 1,
projection: {type: d3.geoAirocean, domain: { type: "Sphere" }},
caption: "Buckminster Fuller’s Airocean projection (aka Dymaxion)"
})
globe.plot({
width: 450,
height: 400,
insetRight: 1,
projection: {
type: (options) =>
d3.geoSatellite()
.rotate(options.rotate ?? [0, 0])
.distance(options.distance ?? 2)
.tilt(options.tilt ?? 0)
.angle(options.angle ?? 0)
.fitSize(
[options.width, options.height],
options.domain ?? { type: "Sphere" }
),
rotate: [-120, 15],
tilt: -32,
distance: 3,
angle: 20
},
caption: "The configurable satellite projection."
})
Plot.plot({
width: 928,
height: 412,
projection: {type: d3.geoInterruptedHomolosine, inset: 2, domain: {type: "Sphere"}},
marks: [
Plot.graticule({ clip: clipGoode ? "sphere" : undefined }),
Plot.geo(land, { fill: "currentColor", clip: clipGoode ? "sphere" : undefined }),
Plot.sphere()
],
caption: "Goode’s interrupted homolosine projection"
})
Plot.plot({
width: 740,
height: 230,
facet: { data: [1, 2], x: ["left", "right"] },
fx: { label: "facet" },
projection: {
type: ({ width, height }) =>
d3
.geoGnomonic()
.rotate([0, -90])
.translate([width / 2, height / 2]),
clip
},
marks: [
Plot.geo(land, { fill: "currentColor", fillOpacity: 0.5, clip }),
Plot.graticule({ clip }),
Plot.frame({ stroke: clip ? "steelblue" : "red" })
]
})
globe.plot({
width: 928,
height: 400,
projection: {
type: () =>
d3.geoProjection((x, y) => [x + 0.4 * y ** 3, y - 0.1 * x]).rotate([0, 40]),
domain: { type: "Sphere" },
inset: 10
}
})
globe.plot({
width: 928,
height: 464,
margin: 1,
projection: {type: () => d3.geoCahillKeyes(), domain: {type: "Sphere"}},
})
d3 = require.alias({
d3: "d3@7.7.0/dist/d3.min.js",
"d3-geo": "d3@7.7.0/dist/d3.min.js",
"d3-array": "d3@7.7.0/dist/d3.min.js",
"d3-geo-projection": "d3-geo-projection@4.0.0/dist/d3-geo-projection.min.js",
"d3-geo-polygon": "d3-geo-polygon@1.12.1/dist/d3-geo-polygon.min.js"
})("d3", "d3-geo-projection", "d3-geo-polygon")
import {land} from "@observablehq/plot-projection"
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.
