Public
Edited
Jan 10
Importers
import { exponential } from "@huw/dist"
plot(exponential(0.5))
function plot(sample) {
const density = [...kde.density1d(sample).points("point", "density")];
const summary = [
{ type: "Mean", point: d3.mean(sample), strokeDasharray: null },
{ type: "Min", point: d3.min(sample), strokeDasharray: null },
{ type: "Max", point: d3.max(sample), strokeDasharray: null },
{ type: "p5", point: d3.quantile(sample, 0.05), strokeDasharray: "5, 3" },
{ type: "p95", point: d3.quantile(sample, 0.95), strokeDasharray: "5, 3" },
{ type: "Median", point: d3.median(sample), strokeDasharray: "2, 2" }
].map((entry) => ({
...entry,
density:
density[
d3.bisectCenter(
density.map(({ point }) => point),
entry.point
)
].density
}));
return Plot.plot({
margin: 12,
marginTop: 24,
marginBottom: 24,
y: { axis: null },
x: {
label: null,
tickFormat: "s",
domain: [0, d3.max(density, ({ point }) => point)]
},
height: 196,
marks: [
Plot.areaY(density, { x: "point", y: "density", fillOpacity: 0.1 }),
Plot.ruleY([0]),
Plot.lineY(density, { x: "point", y: "density" }),
...Object.entries(Object.groupBy(summary, (d) => d.strokeDasharray)).map(
([strokeDasharray, values]) =>
Plot.ruleX(values, {
x: "point",
y1: "density",
strokeDasharray,
strokeOpacity: 0.3
})
),
Plot.tip(
summary,
Plot.pointerX({
x: "point",
y: "density",
channels: {
type: "type",
value: "point"
},
format: { type: true, value: true, x: false, y: false }
})
),
Plot.axisX(
summary.map(({ point }) => point),
occludeAxisX({
tickFormat: "s",
padding: 12
})
),
Plot.crosshairX(density, { x: "point" })
]
});
}
kde = require("fast-kde")
import { occludeAxisX } from "@huw/occlude-axis"
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.
