marks = [
Plot.ruleY([0]),
//Plot.rectY(values, Plot.groupZ({ y: "max" }, Plot.binX({ y: "count" }))),
Plot.rectY(values, Plot.binX({ y: "count" }, { fill: "#000" })),
Plot.rectX(
values,
Plot.pointerX({
...Plot.binX({ y: "count" }, { fill: "#000", fillOpacity: 0.1 }),
y: null
})
),
Plot.rectY(values, Plot.pointerX(Plot.binX({ y: "count" }, { fill: "red" })))
]
Plot.plot({
x: { label: "value →" },
y: { label: "↑ count", grid: true },
width: 400,
height: 150,
marks,
// crosshair cursor should actually be used for brush interactions.
style: { cursor: "crosshair" }
})
Plot.plot({
x: { label: "value →" },
y: { label: "↑ count", grid: true },
marks
})
Plot.transform(values, (data, facets) => {
return {
data,
facets
};
})
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.
