Plot.rectY(
pts,
Plot.mapY(
(counts) => counts.map((u) => u / interval),
Plot.binX(
{ y: "proportion-facet" },
{ x: "value", fy: "mu", fill: "series", interval }
)
)
).plot({ x: { domain: [-3.5, 8.5] }, y: { domain: [0, 0.45], grid: true } })
Plot.lineY(
pts,
Plot.mapY(
(counts) => counts.map((d) => d / d3.sum(counts) / interval),
Plot.binX(
{ y: "count" },
{ x: "value", fy: "mu", stroke: "series", interval, curve: "basis" }
)
)
).plot({ x: { domain: [-3.5, 8.5] }, y: { domain: [0, 0.45], grid: true } })
Plot.plot({
x: { domain: [-3.5, 8.5] },
y: { domain: [0, 0.45], grid: true },
marks: [
Plot.areaY(
pts,
Plot.mapY(
(counts) => counts.map((d) => d / d3.sum(counts) / interval),
Plot.binX(
{ y2: "count" },
{
x: "value",
fy: "mu",
fill: "series",
fillOpacity: 0.5,
interval,
curve: "basis"
}
)
)
),
Plot.lineY(
pts,
Plot.mapY(
(counts) => counts.map((d) => d / d3.sum(counts) / interval),
Plot.binX(
{ y: "count" },
{ x: "value", fy: "mu", stroke: "series", interval, curve: "basis" }
)
)
)
]
})
pts = [
...d3.range(0, 10000).map((x, i) => ({
value: d3.randomNormal(0)() + (i % 3 === 0 ? 2 * Math.random() : 0),
mu: 0,
series: i % 3 === 0 ? "A" : "B"
})),
...d3.range(0, 30000).map((x, i) => ({
value: d3.randomNormal(4)() + (i % 3 === 0 ? 2 * Math.random() : 0),
mu: 4,
series: i % 3 === 0 ? "B" : "C"
}))
]
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.
