Public
Edited
Jan 25, 2024
Importers
1 star
sq`x = 10M to 50M`
kde = require("fast-kde")
async function render(output, options) {
const data =
output.value.result?._value?.value?.samples ??
output.value.bindings?._value?.last()?.value?.samples;
if (data === undefined) {
throw new Error("Unknown value on Squiggle result");
}
const density = [...kde.density1d(data)];
const quantiles = [0.05, 0.25, 0.5, 0.75, 0.95].map((p) =>
d3.quantile(data, p)
);
const nearestQuantilesInDensity = [quantiles[0], quantiles[2], quantiles[4]]
.map((q) => ({
i: d3.bisectCenter(
density.map((d) => d.x),
q
),
q
}))
.map(({ q, i }) => ({ x: q, y: density[i].y }));
const element = Plot.plot({
y: { ticks: 0, label: "Density Estimate" },
x: { label: "Value" },
height: 196,
width,
marks: [
Plot.areaY(density, { x: "x", y: "y", fillOpacity: 0.1 }),
Plot.lineY(density, { x: "x", y: "y" }),
Plot.ruleY([0]),
Plot.ruleX(nearestQuantilesInDensity, {
x: "x",
y2: "y",
strokeDasharray: [5, 3]
}),
Plot.axisX(quantiles, {
tickSize: 17,
tickFormat: ".3s",
label: null
}),
Plot.axisX({ textStroke: "#fff", textStrokeWidth: 5 }),
Plot.crosshairX(density, { x: "x", y: "y" })
],
...options
});
return element;
}
import { sq } with { render } from "@huw/squiggle"
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.
