44:["$","title",null,{"children":"Sample Distribution (Histogram/Kernel Density/CDF) | Vasco Asturiano | Observable"}] 4c:T309c,const chart = display((() => { const HISTOGRAMQ = 1; // Default Q const DENSQ = HISTOGRAMQ / 8; // Smoothing of the density function, in value units const DENSNORM = 0.8; // Normalizing value of the densityfunction (0-1) const CDFQ = HISTOGRAMQ / 8; const MAXSAMPLEAREAPOINTS = 2000; // Max svg lines to display in the sample area (to avoid browser freeze) const INITZOOMPERCENTILE = 0.98; // Which value percentile area should the initial zoom be set to const T = 750; // Transition duration, in ms const logBase = scaleBase; const data = Array.from(values).sort(d3.ascending); const maxVal = d3.max(data), meanVal = d3.mean(data), medianVal = d3.median(data); const round = (x, n) => Math.round(x * 10 ** n) / 10 ** n; const W = Math.max(480, width); const H = Math.max(360, Math.min(Math.round(W * 0.6), Math.round(innerHeight * 0.7))); const M = Math.min(55, Math.round(W * 0.07)); // axis margin const SA = Math.round(H * 0.03); // sample area height const GW = W - M * 2; // graph width const GH = H - M * 2 - SA; // graph height // ---- Data functions ---- function getHistogram(q, lb) { const base = 1 / lb; const expQ = Math.pow(q * Math.pow(base, 4), base); const points = []; for (let p = 0, end = Math.pow(maxVal, base); p < end; p += expQ) points.push(round(Math.pow(p, 1 / base), 2)); points.push(round(maxVal, 2)); const bins = []; for (let i = 0; i < points.length - 1; i++) { const x0 = points[i], x1 = points[i + 1]; if (x1 <= x0) continue; const lo = d3.bisectLeft(data, x0); const hi = i === points.length - 2 ? d3.bisectRight(data, x1) : d3.bisectLeft(data, x1); bins.push({x: x0, dx: x1 - x0, length: hi - lo, y: (hi - lo) / data.length}); } return bins; } function getDensity(q, xs, normVal, maxPoints) { const [d0, d1] = xs.domain(); const pts = xs.ticks(Math.min(Math.round((d1 - d0) / q * 4), maxPoints)); const dens = pts.map(x => { let sum = 0; for (let i = d3.bisectLeft(data, x - q), hi = d3.bisectRight(data, x + q); i < hi; i++) { const u = (x - data[i]) / q; sum += 0.75 * (1 - u * u) / q; } return [x, sum / data.length]; }); const k = normVal / d3.max(dens, d => d[1]); for (const d of dens) d[1] *= k; dens.unshift([0, 0]); dens.push([d1, 0]); return dens; } function getCdf(q, xs, lb, maxPoints) { const [d0, d1] = xs.domain(); const binned = getHistogram(Math.max(q, (d1 - d0) / maxPoints), lb); if (!binned.length) return []; const off = binned[0].dx / 2; let aggr = 0; const cdf = binned.map(b => [b.x + off, (aggr += b.y)]); cdf.unshift([d0, 0]); cdf.push([d1, 1]); return cdf; } const getXScale = lb => (lb === 1 ? d3.scaleLinear() : d3.scalePow().exponent(1 / lb)) .domain([0, maxVal]).range([0, GW]).clamp(true); function getYScale(bins, domain) { let maxY = 0; for (const b of bins) { if (domain) { if (b.x + b.dx < domain[0]) continue; if (b.x > domain[1]) break; } if (b.y > maxY) maxY = b.y; } return d3.scaleLinear().domain([0, (maxY || 1) * 1.05]).range([GH, 0]).clamp(true); } // ---- State ---- const linScale = getXScale(1); const densityData = getDensity(DENSQ, linScale, DENSNORM, GW * 2); const cdfData = getCdf(CDFQ, linScale, 1, GW * 2); const xScale = getXScale(logBase); const y2Scale = d3.scaleLinear().domain([0, 1]).range([GH, 0]); let yScale = getYScale([]); let histQ = HISTOGRAMQ, showDens = true, showCdfLine = false; let histogramData = []; let zoom = 0; for (const d of cdfData) { zoom = d[0]; if (d[1] > INITZOOMPERCENTILE) break; } xScale.domain([0, zoom]); // ---- DOM ---- const root = document.createElement("div"); root.className = "sd"; const style = document.createElement("style"); style.textContent = ` .sd svg { max-width: 100%; height: auto; } .sd .axes path, .sd .axes line { stroke: black; fill: none; } .sd .axes { shape-rendering: crispEdges; } .sd .axes .x-axis, .sd .axes .y-axis, .sd .axes .y2-axis { font: ${M * 0.25}px sans-serif; } .sd .axes .y-axis text { fill: brown; } .sd .axes .y2-axis text { fill: green; } .sd .grid { shape-rendering: crispEdges; } .sd .grid line, .sd .grid path { stroke: lightgrey; stroke-opacity: 0.6; } .sd .grid .domain { display: none; } .sd .histo-bar { fill: lightgrey; fill-opacity: .3; stroke: brown; stroke-opacity: .4; shape-rendering: crispEdges; cursor: crosshair; } .sd .histo-bar:hover { fill-opacity: .7; stroke-opacity: .9; } .sd .density-line { fill: blue; fill-opacity: .13; stroke: none; } .sd .cdf-line { fill: none; stroke: green; stroke-opacity: .4; stroke-width: 2px; } .sd .cdf-line:hover { stroke-opacity: .9; stroke-width: 3px; } .sd .reset-zoom { font: italic ${M * 0.26}px sans-serif; fill: blue; opacity: .65; cursor: pointer; } .sd .reset-zoom:hover { opacity: 1; } `; root.append(style); const svg = d3.select(root).append("svg").attr("viewBox", [0, 0, W, H]).attr("width", W).attr("height", H); const g = svg.append("g").attr("transform", `translate(${M},${M})`); // Grid const grid = g.append("g").attr("class", "grid"); grid.append("g").attr("class", "x-grid").attr("transform", `translate(0,${GH + SA})`); grid.append("g").attr("class", "y-grid"); // Sample area background g.append("rect").attr("x", 0).attr("y", GH).attr("width", GW).attr("height", SA) .attr("stroke", "black").attr("stroke-width", 0.5).attr("stroke-opacity", 0.7).attr("fill", "lightgrey"); // Axes const axes = g.append("g").attr("class", "axes"); axes.append("g").attr("class", "x-axis").attr("transform", `translate(0,${GH + SA})`); const yAxisG = axes.append("g").attr("class", "y-axis"); const y2AxisG = axes.append("g").attr("class", "y2-axis").attr("transform", `translate(${GW},0)`) .call(d3.axisRight(y2Scale).tickFormat(d => round(d * 100, 2) + "%")) .style("opacity", 0); // Labels g.append("text").attr("x", GW).attr("y", GH + SA).attr("dy", "2.5em").attr("text-anchor", "end") .attr("font-style", "italic").attr("font-size", M * 0.28).attr("font-family", "sans-serif").attr("fill", "#777") .text(`${data.length} Samples`); yAxisG.append("text").attr("transform", "rotate(-90)").attr("y", 8).attr("dy", ".8em").attr("text-anchor", "end").attr("fill", "currentColor").text("Relative (%)"); y2AxisG.append("text").attr("transform", "rotate(-90)").attr("y", -12).attr("text-anchor", "end").attr("fill", "currentColor").text("Cumulative (%)"); // Drag-zoom traction area g.append("rect").attr("width", GW).attr("height", GH).attr("opacity", 0).style("cursor", "crosshair"); const gSamples = g.append("g"); const gDensity = g.append("g"); const gBars = g.append("g"); const gCdf = g.append("g"); const densityPath = gDensity.append("path").attr("class", "density-line"); const cdfPath = gCdf.append("path").attr("class", "cdf-line"); const cdfTitle = cdfPath.append("title"); g.append("text").attr("class", "reset-zoom").attr("x", GW * 0.99).attr("y", -GH * 0.03).attr("text-anchor", "end") .text("Reset Zoom") .on("click", () => { xScale.domain([0, maxVal]); redrawX(); }); // ---- Rendering ---- function renderContainer() { const t = sel => sel.transition().duration(T); t(g.select(".x-grid")).call(d3.axisTop(xScale).tickFormat("").tickSize(GH + SA)); t(g.select(".y-grid")).call(d3.axisRight(yScale).tickFormat("").tickSize(GW)); t(g.select(".x-axis")).call(d3.axisBottom(xScale)); t(g.select(".y-axis")).call(d3.axisLeft(yScale).tickFormat(d => round(d * 100, 3) + "%")); } function renderSamples() { const [d0, d1] = xScale.domain(); const step = Math.ceil(data.length / MAXSAMPLEAREAPOINTS); const vals = Array.from(new Set(data.filter((d, i) => i % step === 0))).filter(v => v >= d0 && v <= d1); const items = vals.map(v => ({v, kind: "sample"})); if (meanVal + 0.00001 >= d0 && meanVal <= d1) items.push({v: meanVal, kind: "mean"}); if (medianVal + 0.00002 >= d0 && medianVal <= d1) items.push({v: medianVal, kind: "median"}); const opacity = Math.min(0.3, 0.05 * MAXSAMPLEAREAPOINTS / Math.min(items.length, MAXSAMPLEAREAPOINTS)); const op = d => (d.kind === "sample" ? opacity : 0.9); const sel = gSamples.selectAll("line").data(items, d => d.kind + d.v).join( enter => enter.append("line") .attr("y1", GH).attr("y2", GH + SA) .attr("x1", d => xScale(d.v)).attr("x2", d => xScale(d.v)) .attr("stroke", d => ({sample: "blue", mean: "brown", median: "darkorange"})[d.kind]) .attr("stroke-width", d => (d.kind === "sample" ? 1 : 2)) .attr("stroke-opacity", 0) .attr("shape-rendering", "crispEdges") .call(s => s.filter(d => d.kind !== "sample").style("cursor", "help") .append("title").text(d => `${d.kind === "mean" ? "Average" : "Median"} Value: ${round(d.v, 3)}`)), update => update, exit => exit.transition().duration(T).attr("stroke-opacity", 0).remove() ); sel.transition().duration(T) .attr("x1", d => xScale(d.v)).attr("x2", d => xScale(d.v)) .attr("stroke-opacity", op); } function renderHistogram() { const bars = gBars.selectAll("rect.histo-bar").data(histogramData).join( enter => enter.append("rect").attr("class", "histo-bar").attr("rx", 1).attr("ry", 1) .attr("x", d => xScale(d.x)).attr("width", d => xScale(d.x + d.dx) - xScale(d.x)) .attr("y", GH).attr("height", 0) .call(s => s.append("title")), update => update, exit => exit.remove() ); bars.select("title").text(d => `${d.x}-${round(d.x + d.dx, 2)} bin: ${round(d.y * 100, 2)}% (${d.length} samples)`); bars.transition().duration(T) .attr("x", d => xScale(d.x)) .attr("y", d => yScale(d.y)) .attr("width", d => xScale(d.x + d.dx) - xScale(d.x)) .attr("height", d => GH - yScale(d.y)); } const line = d3.line().x(d => xScale(d[0])).y(d => y2Scale(d[1])).curve(d3.curveBasis); function renderDensity() { const [d0, d1] = xScale.domain(); const pts = showDens ? densityData.slice() : []; pts.unshift([d0, 0]); pts.push([d1, 0]); densityPath.transition().duration(T).attr("d", line(pts)); } function renderCdf() { cdfPath.transition().duration(T).attr("d", showCdfLine ? line(cdfData) : null); } cdfPath.on("mouseover", function (event) { const [px, py] = d3.pointer(event, this); cdfTitle.text(`<${round(xScale.invert(px), 2)}: ${round(y2Scale.invert(py) * 100, 2)}%`); }); function redrawX() { yScale = getYScale(histogramData, xScale.domain()); renderContainer(); renderSamples(); renderDensity(); renderHistogram(); renderCdf(); } // Click-drag to zoom on the X axis g.on("mousedown", event => { const [sx, sy] = d3.pointer(event, g.node()); if (sx < 0 || sx > GW || sy < 0 || sy > GH) return; event.preventDefault(); const rect = g.append("rect").attr("y", 0).attr("height", GH) .attr("stroke", "blue").attr("stroke-opacity", 0.6).attr("fill", "blue").attr("fill-opacity", 0.3); const clampX = e => Math.max(0, Math.min(GW, d3.pointer(e, g.node())[0])); const move = e => { const x = clampX(e); rect.attr("x", Math.min(sx, x)).attr("width", Math.abs(sx - x)); }; const up = e => { window.removeEventListener("mousemove", move); window.removeEventListener("mouseup", up); rect.remove(); const ex = clampX(e); const newDomain = [sx, ex].map(xScale.invert).sort(d3.ascending); if (ex !== sx && newDomain[1] - newDomain[0] > 0.001) { xScale.domain(newDomain); redrawX(); } }; window.addEventListener("mousemove", move); window.addEventListener("mouseup", up); }); // Public API: update bin width / visibility options without resetting zoom root.update = ({q, density, cdf}) => { histQ = q; showDens = density; showCdfLine = cdf; histogramData = getHistogram(histQ, logBase); yScale = getYScale(histogramData, xScale.domain()); renderContainer(); renderDensity(); renderHistogram(); renderCdf(); y2AxisG.transition().duration(T).style("opacity", showCdfLine ? 1 : 0); }; renderSamples(); invalidation.then(() => svg.selectAll("*").interrupt()); return root; })());4d:[{"id":"2e0c4ff4fa59176379bd8c413ce2bf4b27d681b9fba9d2ed1da5f946b2507bdbfc8eee1976518f9cfff29553aed7cfc44b5d492de7614bae9f772a6e534ed166","href":"https://static.observableusercontent.com/files/2e0c4ff4fa59176379bd8c413ce2bf4b27d681b9fba9d2ed1da5f946b2507bdbfc8eee1976518f9cfff29553aed7cfc44b5d492de7614bae9f772a6e534ed166","name":"values.json","type":"application/json","lastModified":1792099952734,"size":36684}] 48:{"id":"c32f7a51fb53ce55","slug":"sample-distribution","title":"Sample Distribution (Histogram/Kernel Density/CDF)","thumbnail":"c97c282f537ce0c65c210f9539049420139ab2fad8381d2696647052cc7a11e1","access_level":"public","create_time":"$D2026-10-15T21:20:27.055Z","update_time":"$D2026-10-15T22:19:43.309Z","view_time":null,"first_public_time":"$D2026-10-15T22:19:16.144Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"dc625de0fe5f3eae","login":"vasturiano","name":"Vasco Asturiano","avatar_url":"https://avatars-next.observableusercontent.com/a45856b753139d5de533417b120862fd466b9396ab5c379d25d7240dc5ee1985","tier":"starter_2024","bio":"Data sculptor","followed_by_you":false,"follows_you":false},"version":66,"publish_version":66,"role":null,"authored":false,"authors":[{"type":"individual","id":"404426135bc21c47","login":"vasturiano","name":"Vasco Asturiano","avatar_url":"https://avatars-next.observableusercontent.com/a45856b753139d5de533417b120862fd466b9396ab5c379d25d7240dc5ee1985","tier":null,"bio":"Data sculptor | github.com/vasturiano","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"dc625de0fe5f3eae","login":"vasturiano","name":"Vasco Asturiano","avatar_url":"https://avatars-next.observableusercontent.com/a45856b753139d5de533417b120862fd466b9396ab5c379d25d7240dc5ee1985","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sample Distribution (Histogram/Kernel Density/CDF)","cells":[{"id":1,"value":"# Sample Distribution (Histogram/Kernel Density/CDF)\n\nThis sample distribution exploratory tool uses a combination of Histogram, Rug, Kernel Density and CDF plots to represent the statistical spread of input data.\n\nOptions are exposed to manipulate the width of the histogram bins and the type of value scale to use (linear vs log base 2). Enabling the CDF representation adds a secondary Y axis with the cumulative values.\n\nZoom on the X axis by click-dragging on the graph.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$4c","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"const binWidth = view(Inputs.range([0.1, 5], {label: \"Bin width\", value: 1, step: 0.1}));\nconst scaleBase = view(Inputs.radio(new Map([[\"Linear\", 1], [\"Log scale\", 2]]), {label: \"Scale\", value: 1}));\nconst showDensity = view(Inputs.toggle({label: \"Show density\", value: true}));\nconst showCdf = view(Inputs.toggle({label: \"Show cdf\", value: false}));","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"chart.update({q: binWidth, density: showDensity, cdf: showCdf});","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"**Data**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"values = FileAttachment(\"values.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"2"}} 24:null