2d:null 2e:["$","title",null,{"children":"Quantile Dotplots | Alejandro Benito-Santos | Observable"}] 33:Tbae,{ const container = d3 .create('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom); const chart = container .append('g') .attr('id', 'chart') .attr('transform', `translate(${margin.left}, ${margin.top})`); chart .append('g') .attr('class', 'axis axis--x') .attr('transform', `translate(0, ${height})`) .call(d3.axisBottom(xScale)); const yScale = d3 .scaleLinear() .domain([0, 0.25]) .rangeRound([height, 0]); const kernelPath = container.append("path"); while (true) { const data = generateRandomNormal(samples, mu, sigma); const stacks = generateDotplotStacks(data, binwidth); const bandwidth = d3.deviation(data) * Math.pow(4 / 3 / samples, 1 / 5); const bins = chart .selectAll(".gBin") .data(stacks) .join( enter => { const g = enter .append("g") .attr("class", "gBin") .attr("transform", d => `translate(${xScale(d.x)}, ${height})`); g.selectAll("circle") .data(d => d.values.map((p, i) => { return { idx: i, value: p, radius: xScale(binwidth / 2) }; }) ) .join(enter => enter .append("circle") .attr("cx", 0) .attr("cy", d => -d.idx * 2 * d.radius - d.radius) .attr("r", d => d.radius) .attr("stroke", "black") ); return g; }, update => { update .selectAll("circle") .data(d => d.values.map((p, i) => { return { idx: i, value: p, radius: xScale(binwidth / 2) }; }) ) .join( enter => enter .append("circle") .attr("cx", 0) .attr("cy", d => -d.idx * 2 * d.radius - d.radius) .attr("r", d => d.radius) .attr("stroke", "black"), update => update.attr("cy", d => -d.idx * 2 * d.radius - d.radius), exit => exit.remove() ); return update.attr( "transform", d => `translate(${xScale(d.x)}, ${height})` ); }, exit => exit.remove() ); const lineData = kde(epanechnikov(bandwidth), xScale.ticks(30), data); // console.log(lineData); const line = d3 .line() .curve(d3.curveCatmullRom) .x(d => margin.left + xScale(d[0])) .y(d => margin.top + yScale(d[1])); kernelPath .datum(lineData) .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 2.5) .attr("stroke-linejoin", "round") // .transition().duration(250).ease(d3.easeLinear) .attr("d", line); yield container.node(); await Promises.tick(3000); } }34:T1b33,{ const visHeight = 2 * height + margin.top + margin.bottom; const red = 'firebrick', blue = 'steelblue'; const container = d3 .create('svg') .attr('width', width + margin.left + margin.right) .attr('height', visHeight); const defs = container.append('defs'); const clipRect = defs .append('clipPath') .attr('id', 'area-clip') .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", xScale(startValue)) .attr("height", height); const lineChart = container .append('g') .attr('id', 'chart') .attr('transform', `translate(${margin.left}, ${margin.top})`); lineChart .append('g') .attr('class', 'axis axis_y') .call( d3 .axisLeft(qfYScale) .ticks(10) .tickFormat(d3.format(",.3f")) ); const curve = d3 .area() .x(d => xScale(d.x)) .y1(d => qfYScale(d.p_less_than_x)) .y0(qfYScale(0)); lineChart .append("path") .attr("d", curve(qfData)) .attr("fill", blue) .attr("stroke", blue); lineChart .append("path") .attr("d", curve(qfData)) .attr("fill", red) .attr("stroke", red) .attr("clip-path", 'url(#area-clip)'); const curveTicksG = container .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const dotplotTicksG = container.append("g"); curveTicksG .selectAll('.x-guideline') .data(quantiles) .enter() .append("line") .attr("class", "x-guideline") .attr("stroke", "lightgrey") .attr("stroke-width", "0.1px") .attr("stroke-dasharray", "5,2") .attr("x1", 0) .attr("y1", d => qfYScale(d.p_less_than_x)) .attr("x2", d => xScale(d.x)) .attr("y2", d => qfYScale(d.p_less_than_x)); curveTicksG .selectAll('.y-tick') .data(quantiles) .enter() .append("line") .attr("class", "y-guideline") .attr("stroke", "lightgrey") .attr("stroke-dasharray", "5,2") .attr("x1", d => xScale(d.x)) .attr("y1", d => yScale(0) - (yScale(0) - qfYScale(d.p_less_than_x))) .attr("x2", d => xScale(d.x)) .attr("y2", d => visHeight - (margin.top + margin.bottom)); const dotplotContainer = container .append('g') .attr("id", "dotplot-container") .attr("transform", `translate(${margin.left}, ${visHeight / 2})`); dotplotContainer .append('g') .attr('class', 'axis axis_x') .attr('transform', `translate(0, ${height})`) .call(d3.axisBottom(xScale)); const bins = dotplotContainer.selectAll(".gBin").data(qfStacks); const binContainerEnter = bins .enter() .append("g") .attr("class", "gBin") .attr("transform", d => `translate(${xScale(d.x)}, ${height})`) .attr("fill", d => (d.x - qBinwidth / 2 <= startValue ? red : blue)); binContainerEnter .selectAll("circle") .data(d => d.values.map((p, i) => { return { idx: i, value: p, radius: xScale(qBinwidth / 2) }; }) ) .enter() .append("circle") .attr("cx", 0) .attr("cy", d => -d.idx * 2 * d.radius - d.radius) .attr("r", d => d.radius) .attr("fill-opacity", 1); const lineG = container.append("g").attr("id", "q-line-g"); const lineY = lineG .append("line") .attr("id", "q-line-y") .attr("x1", xScale(startValue) + margin.left) .attr("x2", xScale(startValue) + margin.left) .attr("y1", visHeight - margin.top) .attr("y2", qfYScale(getPercentageForX(startValue) / 100) + margin.top) .attr("stroke", "black") .attr("stroke-width", "1px"); const lineX = lineG .append("line") .attr("id", "q-line-x") .attr("x1", margin.left) .attr("x2", xScale(startValue) + margin.left) .attr("y1", qfYScale(getPercentageForX(startValue) / 100) + margin.top) .attr("y2", qfYScale(getPercentageForX(startValue) / 100) + margin.top) .attr("stroke", "black") .attr("stroke-width", "1px"); lineG .append('text') .attr("x", xScale(startValue) + margin.left + 5) .attr("y", (visHeight + 100) / 2) .attr("id", "q-line-text") .attr("font-size", "10px") .text(`${getPercentageForX(startValue).toFixed(2)}%`); const mouseOverlay = container .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width) .attr("height", visHeight - margin.top - margin.bottom + 10) .attr("fill", "yellow") .attr("opacity", 0.0); container.append("g").attr("id", "explanation-g"); explainResults(container.select("#explanation-g"), qfStacks, startValue); mouseOverlay.on("click", function() { var coords = d3.mouse(this); console.log(xScale(18)); console.log(coords[0]); const xValue = xScale.invert(coords[0] - margin.left); console.log(xValue); mutable startValue = xValue; }); function explainResults(group, stacks, xValue) { const selDots = qfStacks.filter(c => c.x - qBinwidth / 2 <= xValue); console.log(selDots, xValue, qBinwidth); const lastStackX = selDots.length == 0 ? 0 : selDots[selDots.length - 1].x; group.html( getSVGText( selDots.map(c => c.values.length).reduce((acc, val) => val + acc, 0), n_quantiles, lastStackX, getPercentageForX(xValue), xValue, minTommss(qBinwidth / 2, true) ) ); } function getPercentageForX(xValue) { const insertIdx = d3.bisectLeft(x, xValue); const perc = (((xValue - qfData[insertIdx - 1].x) / (qfData[insertIdx].x - qfData[insertIdx - 1].x)) * (qfData[insertIdx].p_less_than_x - qfData[insertIdx - 1].p_less_than_x) + qfData[insertIdx - 1].p_less_than_x) * 100; return perc; } function getSVGText(dots, totalDots, dotsX, percent, xValue, timeWidth) { return ` The dotplot says: "You will miss the bus ${dots} out of ${totalDots} times (${( (dots * 100) / totalDots ).toFixed( 2 )}%) if you arrive in approximately (±${timeWidth}) ${minTommss( dotsX )}" The CDF says: "You will miss the bus ${Math.ceil( percent )} out of 100 times (${percent.toFixed( 2 )}%) if you arrive in exactly ${minTommss( xValue )}" `; } function minTommss(minutes, short) { var min = Math.floor(Math.abs(minutes)); var sec = Math.floor((Math.abs(minutes) * 60) % 60); if (short) return `${min}m:${sec}s`; else return `${min} minutes and ${sec} seconds`; } return container.node(); }35:[{"id":"dddd3c737cebdf4f6bdf05a39fd19e0ce20347ba22eee4948e1d511f83550a8e35c310ca9afb539d4b9755091ded9d5821a003e2957e959459cf09d3488d8818","href":"https://static.observableusercontent.com/files/dddd3c737cebdf4f6bdf05a39fd19e0ce20347ba22eee4948e1d511f83550a8e35c310ca9afb539d4b9755091ded9d5821a003e2957e959459cf09d3488d8818","name":"petit-prince.png","type":"image/jpeg","lastModified":1588601569285.852,"size":31692}] 31:{"id":"94bb602c3e1882e1","slug":"quantile-dotplots","title":"Quantile Dotplots","thumbnail":"48f8a33bfe43b83942408df697d5a03cb6083782d8d069b47cd856872e7947d9","access_level":"public","create_time":"$D2019-11-05T11:28:02.493Z","update_time":"$D2020-05-05T10:04:46.813Z","view_time":null,"first_public_time":"$D2020-05-05T09:45:31.964Z","has_unpublished_edits":null,"fork":false,"stars":41,"starred":false,"owner":{"type":"team","id":"66257f7c1d7525fe","login":"alexbensan","name":"Alejandro Benito-Santos","avatar_url":"https://avatars-next.observableusercontent.com/b9bde40a4c4f6f53ee5a7c0bca8a5bc71ed92f6d58c1556eed4a2338c4e959e4","tier":"starter_2024"},"version":1700,"publish_version":1700,"role":null,"authored":false,"authors":[{"type":"individual","id":"901c0c91b87a136d","login":"alexbensan","name":"Alejandro Benito-Santos","avatar_url":"https://avatars-next.observableusercontent.com/b9bde40a4c4f6f53ee5a7c0bca8a5bc71ed92f6d58c1556eed4a2338c4e959e4","tier":null}],"members":[{"type":"individual","id":"901c0c91b87a136d","login":"alexbensan","name":"Alejandro Benito-Santos","avatar_url":"https://avatars-next.observableusercontent.com/b9bde40a4c4f6f53ee5a7c0bca8a5bc71ed92f6d58c1556eed4a2338c4e959e4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":22,"collection":{"id":"5296e5494313d500","slug":"dot-plots","title":"Dot Plots","owner":{"id":"66257f7c1d7525fe","login":"alexbensan","name":"Alejandro Benito-Santos"}},"type":"notebook","body":{"title":"Quantile Dotplots","cells":[{"id":420,"value":"md`# Quantile Dotplots\nI am studying uncertainty visualization in the research project [PROVIDEDH](https://providedh.eu/) so I decided to replicate Matthew Kay's [code](https://github.com/mjskay/when-ish-is-my-bus/blob/master/quantile-dotplots.md) for generating quantile dotplots as explained in the paper:\n\nMatthew Kay, Tara Kola, Jessica Hullman, Sean Munson. *When (ish) is My Bus? User-centered Visualizations of Uncertainty in Everyday, Mobile Predictive Systems*. CHI 2016. DOI: [10.1145/2858036.2858558](http://dx.doi.org/10.1145/2858036.2858558).\n\nThe majority of the contents of this notebook are a rework, so all praise should go to the original authors. Quoted text is indented and preceded by the symbol \"→\".`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"md`# Representing a continuous probability distribution as discrete outcomes\n\n> → We might like to represent a continuous probability distribution (say, a prediction for when a bus is going to arrive) as discrete outcomes, since frequency-based (or \"discrete outcome\") presentations can be easier for people to interpret. How should we do that?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"md`## A problematic solution: random draws\n\n> → A first pass at representing a continous probability distribution as discrete outcomes might be to generate random draws from that distribution. However, especially for a small number of samples, this tends not to work well. The problem is that any given random sample of (say) 20 isn't always representative.\n\n> → For example, a log-normal distribution might look like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"mu = Math.log(11.4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"sigma = 0.2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"x = jStat.seq(0.01, 30, 1001)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"y = (x => jStat.lognormal.pdf(x, mu, sigma))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"density_data = x.map(d => ({'x': d, 'y': y(d)}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"{\n const container = d3\n .create('svg')\n .attr('width', width + margin.left + margin.right)\n .attr('height', height + margin.top + margin.bottom);\n\n const chart = container\n .append('g')\n .attr('id', 'chart')\n .attr('transform', `translate(${margin.left}, ${margin.top})`);\n\n chart\n .append('g')\n .attr('class', 'axis axis--x')\n .attr('transform', `translate(0, ${height})`)\n .call(d3.axisBottom(xScale));\n\n chart\n .append('g')\n .attr('class', 'axis axis--y')\n .call(d3.axisLeft(yScale));\n\n const curve = d3\n .line()\n .x(d => xScale(d.x))\n .y(d => yScale(d.y));\n\n chart\n .append(\"path\")\n .attr(\"d\", curve(density_data))\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"red\")\n .attr(\"stroke-width\", 2.5)\n .attr(\"stroke-linejoin\", \"round\");\n\n chart\n .append('line')\n .attr(\"x1\", xScale(11))\n .attr(\"y1\", 0)\n .attr(\"x2\", xScale(11))\n .attr(\"y2\", height)\n .style(\"stroke\", \"red\");\n\n return container.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"xScale = d3\n .scaleLinear()\n .domain(d3.extent(density_data, d => d.x))\n .rangeRound([0, width])\n .nice()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"yScale = d3.scaleLinear().domain(d3.extent(density_data, d => d.y)).rangeRound([height, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1215,"value":"md`\n> → \"And we could generate random samples of a set size, say 20, to visualize this. But every time we do that it looks different.\n\nHere below you can see an animation displaying different draws of samples. I overlay an Epanechnikov Kernel Smooth to see how well (or bad) the original distribution can be reconstructed from the data. (see https://observablehq.com/@d3/kernel-density-estimation for more on this). The kernel bandwidth is picked according to [Silverman's rule of thumb](https://en.wikipedia.org/wiki/Kernel_density_estimation).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"viewof samples = slider({\n min: 10,\n max: 200,\n step: 1,\n value: 20,\n title: \"Number of samples\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"binwidth = 1.25 * Math.sqrt(20/samples);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1502,"value":"md`Sometimes it resembles the original distribution (more or less). But often it looks more like a boa digesting an elephant.\n\nIt's a matter of luck!\n\n\n

My drawing was not a picture of a hat. Photo: [monkchips/Flickr](https://www.flickr.com/photos/monkchips/4157237317)

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"md`### A consistent solution: a quantile dotplot\n> → One way to get a more consistent representation is to use the quantile function of the distribution instead of random draws. In essence, this encodes the cumulative distribution function one-dimensionally, and then turns it into a Wilkinsonian dotplot. (Wilkinson originally described dotplots for displaying sample data in [Wilkinson, L, Dot Plots, *The American Statistician*, 1999](dx.doi.org/10.1080/00031305.1999.10474474); we re-use them here for displaying predictive quantiles, hence *quantile dotplot*).\n\n> → First, we generate evenly-space quantiles in probability space (i.e. from 0 to 1) depending on the number of samples we want. If you are familiar with [Q-Q plots](https://observablehq.com/@d3/q-q-plot), this is essentially the same approach used to generate representative quantiles for a Q-Q plot.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"p_less_than_x = jStat.seq(1/n_quantiles / 2, 1 - (1/n_quantiles / 2), n_quantiles)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"quantiles = p_less_than_x.map(d => ({'p_less_than_x': d, 'x': jStat.lognormal.inv( d, mu, sigma )}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"md`> → The variable _quantiles_ above shows the probability of drawing a value less than x (i.e. P(X < x)) and the corresponding value of x to achieve that probability on the underlying distribution. We generate 20 (or whatever value of samples you like) values of p_less_than_x evenly-spaced in (0,1) (i.e. not including 0 or 1), and then find x using the inverse CDF (aka the quantile function) of the predictive distribution at each value of p_less_than_x. If we then take those values of x and plot them as a dotplot, we get a quantile dotplot:\n\nVisualized with the CDF ([inspiration](https://vega.github.io/vega/examples/quantile-dot-plot/)), that looks like this (click on the chart to explore risk thresholds):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"viewof n_quantiles = slider({\n min: 10, \n max: 200, \n step: 1, \n value: 20, \n title: \"Number of quantiles\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"md`Properties of the quantile dotplot\n----------------------------------\n\n### Shape approximates density\n\n> → The shape a quantile dotplot approximates the shape of the density.\n\n### Finding probability intervals reduces to counting\n> → Inferences about one-sided probability intervals on the distribution can be made through counting. If our example distribution represents a probability distribution over predicted time to arrive for my bus, and I am willing to miss the bus 2/20 times, I can count up 2 dots (\"busses\") from the left to get the time I should arrive at the bus stop. This works because the x-value for \\`P(X < x) = 2/20\\` will be between the second and third dot. More generally, the x-value for \\`P(X < x) = k/20\\` will be between the \\`k\\`th and \\`k + 1\\`th dot).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1575,"value":"md`## Definitions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"qfYScale = d3\n .scaleLinear()\n .domain(d3.extent(qfData, d => d.p_less_than_x))\n .range([height, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"qfData = x.map(d => ({\n x: d,\n p_less_than_x: jStat.lognormal.cdf(d, mu, sigma)\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"qfStacks = generateDotplotStacks(quantiles.map(c => c.x), qBinwidth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1109,"value":"function generateRandomNormal(samples, mu, sigma) { \n return Array.from({length:samples}).map(d => jStat.lognormal.sample(mu, sigma))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"function generateDotplotStacks(data, binwidth) {\n data = data.sort((a, b) => a - b);\n const stacks = [];\n for (let i = 0; i < data.length; ) {\n const threshold = data[i] + binwidth;\n\n const stack = [data[i]];\n let j = i + 1;\n\n while (data[j] < threshold) {\n stack.push(data[j++]);\n }\n let v = (stack[stack.length - 1] - stack[0]) / 2;\n const diff = data[i] - data[i - 1];\n // if (diff > binwidth || i == 0) { // X_0 = -inf in the original algorithm\n // v = (stack[stack.length - 1] - stack[0]) / 2;\n // }\n\n stacks.push({\n values: stack,\n // \"x\": jStat.median(stack),\n // \"x\": (stack[0] + stack[stack.length - 1]) / 2\n x: stack[0] + v,\n v: v,\n diff: diff,\n threshold: threshold\n });\n i = j;\n }\n return stacks;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"qBinwidth = 1.25 * Math.sqrt(20/n_quantiles);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1393,"value":"mutable startValue = 9","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"margin = {\n return {\n top: 50,\n right: 50, \n bottom: 50, \n left: 100\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1491,"value":"import { kde, epanechnikov } from \"@d3/kernel-density-estimation\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"jStat = require('//cdn.jsdelivr.net/npm/jstat@latest/dist/jstat.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"d3 = require(\"d3@5\", \"d3-random@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"