Plot.dot(penguins, { x: "culmen_length_mm", y: "culmen_depth_mm" }).plot()
Plot.plot({
y: {
grid: true,
percent: true
},
marks: [
Plot.ruleY([0]),
Plot.barY(alphabet, {
x: "letter",
y: "frequency",
sort: { x: "y", reverse: false }
})
]
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Plot.lineY(aapl, { x: "Date", y: "Close" }).plot({ y: { grid: true } })
data = FileAttachment("data.csv").csv({ typed: true })
Inputs.table(data)
Plot.plot({
marks: [Plot.boxX(data, { x: "gdppc" })]
})
Plot.plot({
grid: true,
marginLeft: 50,
facet: {
data: data,
y: "region"
},
marks: [Plot.boxX(data, { x: "gdppc" })]
})
world = FileAttachment("world.json").json()
Plot.plot({
color: {
scheme: "category10",
legend: true
},
projection: { type: d3.geoEqualEarth, domain: { type: "Sphere" } },
marks: [
Plot.geo({ type: "Sphere" }, { fill: "#add8f7", stroke: "none" }),
Plot.geo(d3.geoGraticule()(), { stroke: "white", strokeWidth: 0.4 }),
Plot.geo(world, {
fill: (d) => d.properties.region
})
]
})
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.
