Public
Edited
May 17, 2023
1 fork
16 stars
Insert cell
Insert cell
Insert cell
Plot.plot({
width: 600,
height: 150,
marks: [
Plot.dot(cars, Plot.dodgeY({ x: (d) => Math.floor(d["mpg"]), r: 10 }))
]
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.ruleX([10]),
Plot.ruleY([0]),
Plot.dot(
cars,
Plot.stackY(
Plot.binX(
{}, // empty reduce, we just want bins to set the *x* in the middle
{
x: "mpg",
z: cars, // each point is a series (z: "name" works too if all names are unique)
thresholds: 30,
r: 10
}
)
)
)
],
width: 600,
height: 150 // threholds, r, width and height are hand picked so as to make nice stacks
})
Insert cell
import { cars } from "@d3/scatterplot" // mtcars
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