2b:null 2c:["$","title",null,{"children":"Beta Distribution UI | Lao | Observable"}] 31:T1a5b,betaRandomVariables = { const w = width; const h = 400; const padding = 25; // display options let numCurves = Math.max(0,Math.min(100,options[0])) let scheme = options[1] let clamp = options[2] let blending = options[3] let range = options[4] // highest point the handle can reach. Can go up to 25 before this computational implementation of the beta function breaks, but by using another method of computing it, can theoretically range from 0 to infinity // linear scales let xScale = d3.scaleLinear([0, 1], [padding, w - padding]); let yScale = d3.scaleLinear([range, 0], [padding, h - padding]); let xScaleInverse = d3.scaleLinear([padding, w - padding], [0, 1]); let yScaleInverse = d3.scaleLinear([padding, h - padding], [range, 0]); // make data let colorscale = d3.scaleSequential(d3[`interpolate${scheme}`]).domain([w/2-clamp*(w-2*padding)/2,w/2+clamp*(w-2*padding)/2]) let handles = [] for(let i=0; i xScale(d[0])) .y((d) => yScale(d[1])) let pdf = svg.selectAll("curve") // graphs the probability density functions .data(handles) // one graph per handles .enter() .append("path") .attr("stroke", (d) => d.color) .attr("stroke-width", 1) .attr("fill", (d) => d.color) .attr("fill-opacity", .1) .style("mix-blend-mode", "darken") .datum((d,i) => graphCurve(xScaleInverse(handles[i].x), yScaleInverse(handles[i].y))) // input parameter for curve .attr("d", line) // TEXT LABELS let textOffset = -13 // how much the alpha and beta coordinates are offset from point when mouseover let shape // for the values of alpha and beta at that circle's mean and gamma var text = svg.selectAll("text") .data(handles) .enter() .append("text") .text((d) => { shape = map(xScaleInverse(d.x), yScaleInverse(d.y)) return shape[0].toFixed(1) + " , " +shape[1].toFixed(1) }) .attr("x", (d) => d.x ) .attr("y", (d) => d.y + textOffset) .style("text-anchor", "middle") .attr("font-family","calibri") .attr("font-weight","bold") .attr("font-size","12pt") .attr("fill", (d) => d.color) .attr("pointer-events", "none") .style("mix-blend-mode", "multiply") .style("fill-opacity", 1e-6); // Moveable point let dotsData = [] let E for( let i=1; i<100; i++){ for( let j=1; j<100; j++){ E = (i) / (i+j) dotsData.push( [E, E**(i-1) * (1-E)**(j-1) / cephes.beta(i, j) ] ) } } var dots = svg .append("g") .attr("cursor", "move") .selectAll("circle") .data(dotsData) .enter() .append("circle") .attr("fill", "#555") .attr("stroke", "none") .attr("cx", (d) => xScale(d[0]) ) .attr("cy", (d) => yScale(d[1]) ) .attr("r", .5) // Moveable point var points = svg .append("g") .attr("cursor", "move") .selectAll("circle") .data((d) => d) .enter() .append("circle") .attr("fill", (d) => d.color) .attr("stroke", "white") .attr("stroke-width", 10) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => d.r) .call(d3.drag().on("drag", dragged)) .style("mix-blend-mode", "multiply"); // INTERACTION ////////////////////////////////////////////////////////////////// let speed = 10 points .on('mouseover', function(event, d) { d3.select(this) .transition().duration(speed).attr("r", (d) => d.r+2) // grow point by 2 when mouse over text.style("fill-opacity", e => e === d ? 1 : 1e-6) }) .on('mouseout', function(event, d) { d3.select(this) .transition().duration(speed).attr("r", (d) => d.r) // shrink point to default when mouse moves away text.style("fill-opacity", 1e-6 ) }) let id, x, y function dragged(event, d) { id = this.id x = event.x y = event.y d3.select(this) .attr("cx", () => { d.x = Math.min(w-padding-1, Math.max(padding+1, x)); // moves x position of circle return d.x; }) .attr("cy", () => { d.y = Math.min(h-padding-1, Math.max(padding, y)); // moves y position of circle return d.y; }) .raise(); //brings point to front points .attr("fill", (d,i) => { if(blending=="Position"){return colorscale(handles[i].x)}else{return handles[i].color } }) text .style("fill-opacity", e => e === d ? 1 : 1e-6 ) .attr("x", d => d.x ) // moves x position of text .attr("y", d => d.y + textOffset) // moves y position of text .attr("fill", (d,i) => { if(blending=="Position"){return colorscale(handles[i].x)}else{return handles[i].color } }) .text((d) => { shape = map(xScaleInverse(d.x), yScaleInverse(d.y)) return shape[0].toFixed(1) + " , " +shape[1].toFixed(1) // updates the alpha and beta of label }) pdf .datum((d,i) => graphCurve(xScaleInverse(handles[i].x), yScaleInverse(handles[i].y)) ) // recalcs all PDFs .attr("d", line) .attr("fill", (d,i) => { if(blending=="Position"){return colorscale(handles[i].x)}else{return handles[i].color } }) .attr("stroke",(d,i)=> { if(blending=="Position"){return colorscale(handles[i].x)}else{return handles[i].color } }) } let xAxis = d3.axisBottom(xScale); svg.append("g").attr("transform", `translate(0,${h - padding})`).call(xAxis); /*let yAxisL = d3.axisLeft(yScale); svg.append("g").attr("transform", `translate(${padding},0)`).call(yAxisL); let yAxisR = d3.axisRight(yScale); svg.append("g").attr("transform", `translate(${w-padding},0)`).call(yAxisR);*/ return svg.node(); }32:T879,viewof options = { const form = html``; form.oninput = () => form.value = [ form.variables.valueAsNumber, form.color.value, form.clamp.valueAsNumber, form.blending.value, form.range.valueAsNumber ]; form.oninput(); return form; }33:Ta0d,The probability density function for the beta distribution is: > ${tex`f(x| α, β) = \displaystyle\frac{x^{α-1}(1-x)^{β-1}}{B(α,β)} `} for ${tex`0 ${tex`E(X)= \mu = \displaystyle\frac{α}{α + β}`}. Solving for ${tex`β`}, we get the first part of the map ${tex`\phi_\beta: (\alpha, \mu) \rightarrow (\alpha, \beta)`} > ${tex`β=\displaystyle\frac{α(1-\mu)}{\mu}`} for ${tex`0<\mu<1`} Varying ${tex`\mu`} shifts the mass of the distribution to the left and right. Given an expected value ${tex`\mu`}, the remaining degree of freedom is the defined by varying ${tex`α`}, which has the effect of squishing the distribution down into a U curve, and pulling the distribution up into a bell curve. However, ${tex`α`} has an asymmetrical effect on the curve, depending on if ${tex`\mu`} is to the left or right of the center. This can be fixed by defining a normalizing relationship ${tex`\phi_\alpha: (\gamma, \mu) \rightarrow (\alpha, \mu)`}. A nice relationship is that ${tex`\gamma`} equals the density function at the mean: > ${tex`f(\mu \: | \: α, \: α(1-\mu) / \mu) = \gamma`} Then the point ${tex`(\mu ,\gamma)`} can be graphed as a tangible handle on the curve. It is difficult to solve this equation for ${tex`α`} analytically because of the beta function, but we can easily make an algorithm that converges on an ${tex`α`} such that the curve intersects the point ${tex`(\mu ,\gamma)`} by making an initial guess ${tex`\alpha_0`}, and then refining that guess recursively. > ${tex`\alpha_0 = \gamma^2 (-5.4 \mu^3 + 5.4 \mu^2 + 0.15 \mu)`}

> ${tex` \alpha_{i+1} = \alpha_i \displaystyle\frac{\gamma}{f(\mu \: | \: \alpha_i, \frac{\alpha_i (1 - \mu)}{\mu})}`} By experimenting, I found 15 recursions gives great precision. With ${tex`\mu`} and ${tex`\gamma`} defined, ${tex`\phi_\alpha`} defines ${tex`\alpha`}, which can be used with ${tex`\phi_\beta`} to define ${tex`\beta`}. > ${tex`\phi_\beta \circ \phi_\alpha = \phi:(\gamma, \mu) \rightarrow (\alpha, \beta)`}34:T4d6,/* function from Mike Bostock's notebook Beta-Distributed Random Values https://observablehq.com/@mbostock/beta-distributed-random-values */ function betaRand(alpha, beta) { function randn() { let u, v, x, y, q; do { u = Math.random(); v = 1.7156 * (Math.random() - 0.5); x = u - 0.449871; y = Math.abs(v) + 0.386595; q = x * x + y * (0.19600 * y - 0.25472 * x); } while (q > 0.27597 && (q > 0.27846 || v * v > -4 * Math.log(u) * u * u)); return v / u; } // Returns a gamma deviate by the method of Marsaglia and Tsang. function randg(shape) { let oalph = shape, a1, a2, u, v, x, mat; if (!shape) shape = 1; if (shape < 1) shape += 1; a1 = shape - 1 / 3; a2 = 1 / Math.sqrt(9 * a1); do { do { x = randn(); v = 1 + a2 * x; } while (v <= 0); v = v * v * v; u = Math.random(); } while ( u > 1 - 0.331 * Math.pow(x, 4) && Math.log(u) > 0.5 * x * x + a1 * (1 - v + Math.log(v)) ); if (shape === oalph) return a1 * v; // alpha > 1 do u = Math.random(); while (u === 0); // alpha < 1 return Math.pow(u, 1 / oalph) * a1 * v; } const u = randg(alpha); return u / (u + randg(beta)); }35:T1d50,betaRandom2 = { const w = width; const h = 400; const padding = 25; // display options let numCurves = 1 let range = 5 let n = 10000 // random samples let bins = (w-2*padding)/2 // linear scales let xScale = d3.scaleLinear([0, 1], [padding, w - padding]); let yScale = d3.scaleLinear([range, 0], [padding, h - padding]); let xScaleInverse = d3.scaleLinear([padding, w - padding], [0, 1]); let yScaleInverse = d3.scaleLinear([padding, h - padding], [range, 0]); // make data let handles = [] for(let i=0; i xScale(i/bins)) .attr("width", 1+xScale(1/bins)-padding) .attr("y", d => yScale(0) - (h-2*padding)*bins/range/n*d.length ) .attr("height", d => (h-2*padding)*bins/range/n*d.length); let line = d3 .line() .x((d) => xScale(d[0])) .y((d) => yScale(d[1])) let pdf = svg.selectAll("curve") // graphs the probability density functions .data(handles) // one graph per handles .enter() .append("path") .attr("stroke", (d) => d.color) .attr("stroke-width", 1) .attr("fill", (d) => d.color) .attr("fill-opacity", 0) .style("mix-blend-mode", "darken") .datum((d,i) => graphCurve(xScaleInverse(handles[i].x), yScaleInverse(handles[i].y))) // input parameter for curve .attr("d", line) // TEXT LABELS let textOffset = -13 // how much the alpha and beta coordinates are offset from point when mouseover let shape // for the values of alpha and beta at that circle's mean and gamma var text = svg.selectAll("text") .data(handles) .enter() .append("text") .text((d) => { shape = map(xScaleInverse(d.x), yScaleInverse(d.y)) return shape[0].toFixed(1) + " , " +shape[1].toFixed(1) }) .attr("x", (d) => d.x ) .attr("y", (d) => d.y + textOffset) .style("text-anchor", "middle") .attr("font-family","calibri") .attr("font-weight","bold") .attr("font-size","12pt") .attr("fill", (d) => d.color) .attr("pointer-events", "none") .style("mix-blend-mode", "multiply") .style("fill-opacity", 1e-6); // Moveable point var points = svg .append("g") .attr("cursor", "move") .selectAll("circle") .data((d) => d) .enter() .append("circle") .attr("fill", (d) => d.color) .attr("stroke", "white") .attr("stroke-width", 10) .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", (d) => d.r) .call(d3.drag().on("drag", dragged)) .style("mix-blend-mode", "multiply"); // INTERACTION ////////////////////////////////////////////////////////////////// let speed = 10 points .on('mouseover', function(event, d) { d3.select(this) .attr("r", (d) => d.r+2) // grow point by 2 when mouse over text.style("fill-opacity", e => e === d ? 1 : 1e-6) }) .on('mouseout', function(event, d) { d3.select(this) .attr("r", (d) => d.r) // shrink point to default when mouse moves away text.style("fill-opacity", 1e-6 ) }) .on('click', function(event, d) { histogram .data( d3.bin().thresholds(makeThrehold(bins))(makeRandom(xScaleInverse(handles[0].x), yScaleInverse(handles[0].y), n).concat(0,1) ) ) .transition().duration(100) .attr("y", d => yScale(0) - (h-2*padding)*bins/range/n*d.length ) .attr("height", d => (h-2*padding)*bins/range/n*d.length); }) /*window.addEventListener('mouseup', () => { points.attr("fill",'pink') })*/ let id function dragged(event, d) { d3.select(this) .attr("cx", () => { d.x = Math.min(w-padding-1, Math.max(padding+1, event.x)); // moves x position of circle return d.x; }) .attr("cy", () => { d.y = Math.min(h-padding-1, Math.max(padding, event.y)); // moves y position of circle d.alpha = map(xScaleInverse(d.x), yScaleInverse(d.y))[0] d.beta = map(xScaleInverse(d.x), yScaleInverse(d.y))[1] return d.y; }) .raise(); //brings point to front points .attr("fill", (d,i) => { return handles[i].color }) text .style("fill-opacity", e => e === d ? 1 : 1e-6 ) .attr("x", d => d.x ) // moves x position of text .attr("y", d => d.y + textOffset) // moves y position of text .attr("fill", (d,i) => { return handles[i].color }) .text((d) => { shape = map(xScaleInverse(d.x), yScaleInverse(d.y)) return d.alpha.toFixed(1) + " , " +d.beta.toFixed(1) // updates the alpha and beta of label }) pdf .datum((d,i) => graphCurve(xScaleInverse(handles[i].x), yScaleInverse(handles[i].y)) ) // recalcs all PDFs .attr("d", line) .attr("fill", (d,i) => { return handles[i].color }) .attr("stroke",(d,i)=> { return handles[i].color }) histogram .data( d3.bin().thresholds(makeThrehold(bins))(makeRandom(xScaleInverse(handles[0].x), yScaleInverse(handles[0].y), n).concat(0,1) ) ) .attr("y", d => yScale(0) - (h-2*padding)*bins/range/n*d.length ) .attr("height", d => (h-2*padding)*bins/range/n*d.length); } let xAxis = d3.axisBottom(xScale); svg.append("g").attr("transform", `translate(0,${h - padding})`).call(xAxis); /*let yAxisL = d3.axisLeft(yScale); svg.append("g").attr("transform", `translate(${padding},0)`).call(yAxisL); let yAxisR = d3.axisRight(yScale); svg.append("g").attr("transform", `translate(${w-padding},0)`).call(yAxisR);*/ return svg.node(); }36:[] 2f:{"id":"4a9da169adcc6fc6","slug":"beta-distribution-ui","title":"Beta Distribution UI","thumbnail":"a8bc85c4849eabbc321d2515d2eb2055df27695defc8987b4b56cb635c6be927","access_level":"public","create_time":"$D2021-10-16T01:20:37.131Z","update_time":"$D2023-05-11T17:11:55.061Z","view_time":null,"first_public_time":"$D2021-11-19T02:57:11.283Z","fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":3100,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"Beta Distribution UI","cells":[{"id":0,"value":"md`# Beta Distribution UI`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":774,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1477,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":818,"value":"function map(mean, gamma) {\n //converts expected value and combined shape parameter to a, b, and calucaluates B(a,b,)\n // guess alpha and beta parameters\n let a = 1.5 * mean * gamma ** 2 * (1 - 0.9 * (2 * mean - 1) ** 2);\n let b = (a - a * mean) / mean;\n let betaCoefficient, estimate;\n // refine alpha until curve intersects point\n for (let i = 0; i < 15; i++) {\n betaCoefficient = cephes.beta(a, b);\n estimate = betaPDF(mean, a, b, betaCoefficient);\n a = (a * gamma) / estimate;\n b = (a - a * mean) / mean;\n }\n return [a, b, betaCoefficient];\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1115,"value":"function betaPDF(x, alpha, beta, B){\n if(x==0){x=.00000001}\n if(x==1){x=.99999999}\n if(0\n**Additional Resources**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1974,"value":"As an example of how this can be used, here is a function from Mike Bostock's [notebook][1] that generates beta-distributed random values.\n[1]:https://observablehq.com/@mbostock/beta-distributed-random-values","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1975,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2558,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1589,"value":"md`
**Libaries**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2398,"value":"cephes = {\n const c = await require(\"https://bundle.run/cephes@1.2.0\");\n await c.compiled;\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1960,"value":"md `
\n**Thanks**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1964,"value":"md` Thanks to [Fil][1], [Mark McClure][2], [Fabian Iwand][3] and [duaneatat][4] for helping me get the D3 points and cephes module working.\n[1]:https://observablehq.com/@fil\n[2]:https://observablehq.com/@mcmcclur\n[3]:https://observablehq.com/@mootari/range-slider\n[4]:https://observablehq.com/@duaneatat\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"