Plot.dot(
{ length },
{
...Plot.group(
{ r: "count" },
{ x, y, fill: "brown", stroke: "white", strokeWidth: 0.75 }
),
sort: sort ? ({ length }) => length : false,
reverse
}
).plot({ width: 400, height: 400, grid: true })
Plot.dot(
{ length },
{
...Plot.bin(
{
data: (d) => d.length,
r: "count",
thresholds: 14
},
{ x: xn, y: yn, stroke: "white", strokeWidth: 0.75, fill: "steelblue" }
),
sort: sort2 ? (d) => d : false,
reverse: reverse2
}
).plot({
width: 400,
height: 400,
x: { ticks: 10, inset: 15 },
y: { ticks: 10, inset: 15 },
grid: true
})
Plot.plot({
width: 400,
height: 250,
marks: [
Plot.rectY(
data,
Plot.stackY(
Plot.binX(
{ y: "count", thresholds: 7, sort: "first", title: "first" },
{
x: "value",
text: "abbr",
sort: "value",
fill: "value",
title: (d) => `${d.abbr} (${d.value})`,
stroke: "white"
}
)
)
),
Plot.text(
data,
Plot.stackY(
Plot.binX(
{
y: "count",
thresholds: 7,
sort: "first",
text: "first",
title: "first"
},
{
x: "value",
sort: "value",
z: "abbr",
text: "abbr",
fill: "black",
title: (d) => `${d.abbr} (${d.value})`
}
)
)
),
Plot.ruleX([0]),
Plot.ruleY([0])
],
color: { type: "diverging", pivot: 3 },
x: { ticks: 7 }
})
Plot.dot(
cars,
Plot.reverse(
Plot.sort(
"length",
Plot.binY(
{ r: "count" },
{
x: "year",
y: "economy (mpg)",
fill: "cylinders",
thresholds: 20
}
)
)
)
).plot()
length = 10000
xn = Plot.valueof({ length }, d3.randomBinomial(10, 0.5)).map(
(d) => d - Math.random()
) // numbers, for binning
x = xn.map((i) => String.fromCharCode(65 + Math.round(i))) // strings, for grouping
yn = Plot.valueof({ length }, d3.randomBinomial(10, 0.5)).map(
(d) => d - Math.random()
)
y = yn.map((i) => String.fromCharCode(65 + Math.round(i)))
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.
