The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
Feb 13
Plot.plot({
projection: { type: "orthographic", rotate: [110, -50] },
marks: [
Plot.dot(airports, { x: "longitude", y: "latitude", fill: "red", r: 1 }),
Plot.voronoiMesh(airports, { x: "longitude", y: "latitude", clip: land }),
Plot.sphere(),
Plot.geo(land)
]
})
Plot.raster({
x1: -1,
x2: 1,
y1: -1,
y2: 1,
fill: (x, y) => Math.atan2(y, x),
clip: {
type: "LineString",
coordinates: d3.range(0, 2 * Math.PI, 0.1).map((angle) => d3.pointRadial(angle, 1))
}
}).plot({ width: 300, aspectRatio: 1 })
Plot.plot({
projection: { type: "albers-usa" },
color: {
type: "linear",
scheme: "RdYlBu",
domain: [0, 2.5],
legend: true,
label: "Water vapor (cm)"
},
marks: [
Plot.raster(vapor, {
fill: Plot.identity,
width: 360,
height: 180,
x1: -180,
y1: 90,
x2: 180,
y2: -90,
interpolate: "barycentric",
blur: 10,
clip: nation
}),
Plot.contour(vapor, {
value: Plot.identity,
width: 360,
height: 180,
x1: -180,
y1: 90,
x2: 180,
y2: -90,
interpolate: "barycentric",
blur: 10,
thresholds: 40,
strokeWidth: 0.5,
clip: nation
}),
Plot.geo(nation)
]
})
Plot.raster({
x1: -1, x2: 1, y1: -1, y2: 1,
fill: (x, y) => Math.atan2(y, x),
clip: {
type: "Polygon",
coordinates: [
d3.range(0, 2 * Math.PI, 0.1).map((angle) => [Math.cos(angle), Math.sin(angle)])
]
}
}).plot({width: 300, aspectRatio: 1})
import { airports, land } from "@visionscarto/geo"
// not used
void Plot.plot({
projection: { type: "orthographic", rotate: [110, -50] },
marks: [
Plot.raster(airports, {
x: "longitude",
y: "latitude",
fill: "latitude",
interpolate: "barycentric",
clip: land
}),
Plot.contour(airports, {
x: "longitude",
y: "latitude",
value: "latitude",
interpolate: "barycentric",
clip: land
}),
Plot.sphere(),
Plot.geo(land)
]
})
Plot = FileAttachment("plot.umd.min.js").url().then(require)
import { vapor } from "@observablehq/plot-raster-projection"
import { us } from "@observablehq/plot-us-choropleth"
nation = topojson.feature(us, us.objects.nation)
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.
