Published
Edited
Oct 31, 2021
Insert cell
Insert cell
athletes = FileAttachment("athletes.csv").csv({typed: true})
Insert cell
Insert cell
Insert cell
Insert cell
dotplot = Plot.dot(athletes, {x: "weight", y: "height", stroke: "sex"}).plot()
Insert cell
Plot.rect(athletes, Plot.bin({fillOpacity: "count"}, {x: "weight", y: "height", fill: "sex"})).plot()
Insert cell
Insert cell
Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight", fill: "sex"})).plot()
Insert cell
viewof weight = html`<input type=range min=0 max=180 step=any>`
Insert cell
Plot.plot({
grid: true,
facet: {
data: athletes,
y: "sex"
},
marks: [
Plot.rectY(
athletes,
Plot.binX({ y: "count" }, { x: "weight", fill: "sex" })
),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
Inputs.table(penguins)
Insert cell
Plot
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
import {Swatches} from "@d3/color-legend"
Insert cell

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.
Learn more