30:[] 2e:{"title":"d3-random","cells":[{"id":0,"value":"# d3-random\n\n[d3-random](https://d3js.org/d3-random) implements random number generators for various probability distributions. By default, each generator sources randomness from [Math.random](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random), which returns a number ${tex`0 \\le x \\lt 1`}. (You can specify a different source of randomness using [*random*.source](/@d3/random-source).)","pinned":false,"hidden":false,"mode":"md"},{"id":656,"value":"Array.from({length: 10}, Math.random)","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"Math.random’s distribution is _uniform_, meaning that all possible floating point numbers in the half-closed interval ${tex`[0,1)`} have the same likelihood of being returned. Thus, if we plot a large number of these values, they should cover the interval fairly, in other words: _uniformly_.","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"pachinko(Math.random)","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"(We’re using Mike Bostock’s [Pachinko simulator](/@mbostock/pachinko-simulator) to visualize samples pulled from the given random number function. Statistics can be fun! You can edit the cell above to try a different random number generator, then hit Shift-Enter or click the play button in the top-right corner of the cell to run.)","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"## Uniform\n\n[d3.randomUniform](https://d3js.org/d3-random#randomUniform) returns a number ${tex`\\text{min} \\le x \\lt \\text{max}`} sampled uniformly from the half-closed interval ${tex`[\\text{min}, \\text{max})`}. It’s just like Math.random, except you can specify a different interval rather than be limited to ${tex`[0,1)`}.","pinned":false,"hidden":false,"mode":"md"},{"id":96,"value":"pachinko(d3.randomUniform(50, 100))","pinned":true,"hidden":false,"mode":"ojs"},{"id":814,"value":"## Integer uniform\n\nSimilarly, [d3.randomInt](https://d3js.org/d3-random#randomInt) returns an integer ${tex`\\lfloor\\text{min}\\rfloor \\le x \\lt \\lfloor\\text{max}\\rfloor`} sampled uniformly. Note that *max* is exclusive, so the largest possible return value is ${tex`\\lfloor\\text{max}\\rfloor - 1`}!","pinned":false,"hidden":false,"mode":"md"},{"id":823,"value":"pachinko(d3.randomInt(50, 100))","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"## Normal, *a.k.a.* the “bell curve”\n\n[d3.randomNormal](https://d3js.org/d3-random#randomNormal) samples from a _normal_ distribution, which is known as the “bell curve” for the shape of its [probability density function](https://en.wikipedia.org/wiki/Normal_distribution).\n\nThe normal distribution is often used to represent numbers that oscillate around a central value, with a probability that decreases with the distance to that value. In statistics, the central value is called the mean (or expected value) _mu_ (${tex`\\mu`}), and the average spread of the distribution is given as the standard deviation _sigma_ (${tex`\\sigma`}).","pinned":false,"hidden":false,"mode":"md"},{"id":111,"value":"pachinko(d3.randomNormal(mu1, sigma1), [0, 1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"viewof mu1 = Inputs.range([0, 1], {\n value: 0.4,\n step: 0.001,\n label: \"mu: expected value\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"viewof sigma1 = Inputs.range([0, 0.4], {\n value: 0.1,\n step: 0.001,\n label: \"sigma: standard deviation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"The standard deviation _sigma_ is expressed in the same unit as the values; for instance, if your numbers represent the lengths of trouts, with _mu_ = 30 cm and _sigma_ = 5 cm, the bulk of the population will be trouts measuring 25 cm to 35 cm. (For precise numbers on trouts and on the normal distribution, please refer to textbooks.)","pinned":false,"hidden":false,"mode":"md"},{"id":171,"value":"## Log-normal\n\n[d3.randomLogNormal](https://d3js.org/d3-random#randomLogNormal) samples from a _log-normal_ distribution, where the logarithm of the sampled value follows a normal distribution. A log-normal distribution is right-skewed. It never yields negative values, and is unbounded for positive values. The probability of having a value greater than *m* decreases sharply for ${tex`m > e^{\\mu + \\sigma}`}, and the probability of having a value less than *m* decreases sharply for ${tex`m < e^{\\mu - \\sigma}`}.\n\nTo model physical characteristics, a log-normal distribution is often more realistic than a normal distribution. Think of our trouts: what might happen in our simulation when we generate the (rare but with a non zero probability) trout with a negative length?","pinned":false,"hidden":false,"mode":"md"},{"id":603,"value":"pachinko(d3.randomLogNormal(mu2, sigma2), [0, 5])","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"viewof mu2 = Inputs.range([-1, 1], {\n value: 0.5,\n step: 0.001,\n label: \"mu: expected log-value\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"viewof sigma2 = Inputs.range([0, 1], {\n value: 0.4,\n step: 0.001,\n label: \"sigma: standard deviation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"If you’d rather think in powers of 10 rather than exponentials, suppose we are sampling the concentration of plastic in the ocean, in different geographical points. That concentration can vary from 1g/km2 in the most preserved areas, to a worrying 100kg/km2 in the most polluted areas. That is a factor of ${tex`10^5`}! A random sample for a simulation of that value could be drawn a log-normal distribution “around ${tex`10^3`} and with a standard deviation of ${tex`10^2`},” as follows:","pinned":false,"hidden":false,"mode":"md"},{"id":207,"value":"Array.from({length: 20}, d3.randomLogNormal(3 * Math.log(10), 2 * Math.log(10)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"## Irwin–Hall\n\n[d3.randomIrwinHall](https://d3js.org/d3-random#randomIrwinHall) samples from an _Irwin–Hall_ distribution: it is the sum of _n_ numbers drawn independently from a uniform distribution. Its only parameter is _n_ and, as _n_ increases, its values tend to concentrate around _n/2_. (Note: our implementation accepts a fractional *n*.)","pinned":false,"hidden":false,"mode":"md"},{"id":599,"value":"pachinko(d3.randomIrwinHall(n1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"viewof n1 = Inputs.range([.1, 20], {\n value: 4,\n step: .1,\n label: \"n: number of draws\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"## Bates\n\n[d3.randomBates](https://d3js.org/d3-random#randomBates) samples from a [Bates distribution](https://en.wikipedia.org/wiki/Bates_distribution). It is almost identical to the Irwin–Hall distribution; the only difference being that it is the _mean_ of _n_ numbers drawn independently from a uniform distribution. Its only parameter is _n_ and its value is close to 1/2 as _n_ increases.\n\nAgain, choose this generator over the normal distribution to make sure that the values are constrained to a certain range.","pinned":false,"hidden":false,"mode":"md"},{"id":233,"value":"pachinko(d3.randomBates(n2), [0, 1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"viewof n2 = Inputs.range([1, 100], {\n value: 4,\n step: 1,\n label: \"n: number of draws\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"## Exponential\n\n[d3.randomExponential](https://d3js.org/d3-random#randomExponential) is a random number generator that follows an [exponential distribution](https://en.wikipedia.org/wiki/Exponential_distribution) with the specified rate *lambda*.","pinned":false,"hidden":false,"mode":"md"},{"id":785,"value":"pachinko(d3.randomExponential(lambda), [0, 5])","pinned":true,"hidden":false,"mode":"ojs"},{"id":572,"value":"viewof lambda = Inputs.range([0.2, 10], {\n value: 2,\n step: 0.001,\n label: \"lambda: radioactive decay rate (mean number of events per second)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"The time span between two events of a Poisson process — such as successive “clicks” on a Geiger counter — follows an exponential distribution. Here’s a simulation, adapted from Tom Roelandts’ article on [The Clustering Illusion](https://tomroelandts.com/articles/the-clustering-illusion), of a Geiger-Müller counter. The article reminds us that humans tend to see or hear patterns, *i.e.* “groups” of events, even with independent events where these clusters have no physical meaning!","pinned":false,"hidden":false,"mode":"md"},{"id":571,"value":"geiger()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"## Poisson\n\nWhere the exponential distribution represents the *time between events*, [d3.randomPoisson](https://d3js.org/d3-random#randomPoisson) generates the [Poisson point process](https://en.wikipedia.org/wiki/Poisson_point_process) which represents the *number of events* in a given time interval. (See [Poisson distribution](https://observablehq.com/@parcly-taxel/the-poisson-distribution) for details.)","pinned":false,"hidden":false,"mode":"md"},{"id":1094,"value":"pachinko(d3.randomPoisson(Math.pow(10, lam)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1089,"value":"viewof lam = Inputs.range([-1, 12], {\n value: 2.6,\n label: \"base-10 logarithm of λ (mean); default value of 2.6 corresponds to λ ≈ 400\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"## Binomial\n\n[d3.randomBinomial](https://d3js.org/d3-random#randomBinomial) samples from a [binomial distribution](https://en.wikipedia.org/wiki/Binomial_distribution) with *n* trials and probability of success *p* the for each trial.","pinned":false,"hidden":false,"mode":"md"},{"id":963,"value":"pachinko(d3.randomBinomial(n3, p3))","pinned":true,"hidden":false,"mode":"ojs"},{"id":976,"value":"viewof n3 = Inputs.range([1, 100], {\n value: 100,\n step: 1,\n label: \"n: number of trials\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"viewof p3 = Inputs.range([0, 1], {\n value: 0.5,\n step: 0.001,\n label: \"p: probability of success\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"## Pareto\n\n[d3.randomPareto](https://d3js.org/d3-random#randomPareto) samples from a [Pareto distribution](https://en.wikipedia.org/wiki/Pareto_distribution) with the specified *alpha*.","pinned":false,"hidden":false,"mode":"md"},{"id":912,"value":"pachinko(d3.randomPareto(alpha), [1, 5])","pinned":true,"hidden":false,"mode":"ojs"},{"id":941,"value":"viewof alpha = Inputs.range([0, 10], {\n value: 1.16,\n step: 0.001,\n label: \"alpha: power value\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"## Bernoulli\n\n[d3.randomBernoulli](https://d3js.org/d3-random#randomBernoulli) samples from a [Bernoulli distribution](https://en.wikipedia.org/wiki/Bernoulli_distribution) with the specified success probability *p*. It always returns either a 0 (failure) or a 1 (success).","pinned":false,"hidden":false,"mode":"md"},{"id":938,"value":"Array.from({length: 20}, d3.randomBernoulli(p))","pinned":true,"hidden":false,"mode":"ojs"},{"id":946,"value":"viewof p = Inputs.range([0, 1], {\n value: 0.5,\n step: 0.01,\n description: \"p: probability of success\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"## Geometric\n\n[d3.randomGeometric](https://d3js.org/d3-random#randomGeometric) samples from a [geometric distribution](https://en.wikipedia.org/wiki/Geometric_distribution) with the specified success probability *p* in ${tex`[0,1]`}. Each returned value ${tex`x \\ge 1`} represents the number of Bernoulli trials (coin flips) needed to get one success.","pinned":false,"hidden":false,"mode":"md"},{"id":957,"value":"Array.from({length: 20}, d3.randomGeometric(p2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":954,"value":"viewof p2 = Inputs.range([0, 1], {\n value: 0.5,\n step: 0.01,\n label: \"p: probability of success\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"## Gamma and beta\n\n[d3.randomGamma](https://d3js.org/d3-random#randomGamma) (waiting time to failure) and [d3.randomBeta](https://d3js.org/d3-random#randomBeta) distributions are used in bayesian analysis. See the notebook “[gamma and beta distributions](https://observablehq.com/@parcly-taxel/the-gamma-and-beta-distributions)” for details.","pinned":false,"hidden":false,"mode":"md"},{"id":1068,"value":"## Generalized extreme values\n\n[d3.randomWeibull](https://d3js.org/d3-random#randomWeibull) represents the Generalized extreme values distribution. Depending on the sign of its first parameter *k*, this distribution is also named:\n- If *k* is positive, the **Weibull** distribution with shape parameter *k*\n- If *k* is zero, the **Gumbel** distribution\n- If *k* is negative, the **Fréchet** distribution with shape parameter *−k*\n\nSee the notebook “[Fréchet, Gumbel, Weilbull](https://observablehq.com/@parcly-taxel/frechet-gumbel-weibull)” for details.","pinned":false,"hidden":false,"mode":"md"},{"id":1076,"value":"## Cauchy and logistics\n\n[d3.randomCauchy](https://d3js.org/d3-random#randomCauchy) represents the [Cauchy distribution](https://en.wikipedia.org/wiki/Cauchy_distribution) (a.k.a. Lorentz or Breit–Wigner distribution), which is used, for example, in spectroscopy.\n\n[d3.randomLogistic](https://d3js.org/d3-random#randomLogistic), the [logistic distribution](https://en.wikipedia.org/wiki/Logistic_distribution), is used in logistic regression and feedforward neural networks.\n\nSee the notebook “[Cauchy and logistic distributions](https://observablehq.com/@parcly-taxel/cauchy-and-logistic-distributions)” for details.","pinned":false,"hidden":false,"mode":"md"},{"id":281,"value":"---\n\n## Appendix\n\nThanks to [Harry Stevens](/@harrystevens) for proofreading. d3.random implements only a handful of distributions; If you’d like to see more, [please contribute!](https://github.com/d3/d3-random/issues)","pinned":false,"hidden":false,"mode":"md"},{"id":595,"value":"dodger = radius => {\n const radius2 = radius ** 2;\n const bisect = d3.bisector(d => d.x);\n const circles = [];\n return x => {\n const l = bisect.left(circles, x - radius);\n const r = bisect.right(circles, x + radius, l);\n let y = 0;\n for (let i = l; i < r; ++i) {\n const { x: xi, y: yi } = circles[i];\n const x2 = (xi - x) ** 2;\n const y2 = (yi - y) ** 2;\n if (radius2 > x2 + y2) {\n y = yi + Math.sqrt(radius2 - x2) + 1e-6;\n i = l - 1;\n continue;\n }\n }\n circles.splice(bisect.left(circles, x, l, r), 0, { x, y });\n return y;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"function* pachinko(random, extent, height = 200) {\n const radius = 2;\n const dodge = dodger(radius * 2 + 1);\n const margin = {top: 0, right: 30, bottom: 20, left: 30};\n const values = Float64Array.from({length: n}, random);\n if (extent === undefined) extent = d3.extent(values);\n const x = d3.scaleLinear(extent, [margin.left, width - margin.right]).nice();\n\n const svg = d3.select(DOM.svg(width, height)).style(\"overflow\", \"visible\");\n yield svg.node();\n\n svg.append(\"g\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x));\n\n for (let i = 0; i < n; ++i) {\n if (i % 20 == 0) yield svg.node();\n const cx = x(values[i]);\n const cy = height - margin.bottom - dodge(cx) - radius - 1;\n if (cy < margin.top) break;\n svg.append(\"circle\")\n .attr(\"cx\", cx)\n .attr(\"cy\", -400)\n .attr(\"r\", radius)\n .attr(\"cy\", cy);\n }\n\n yield svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":799,"value":"function geiger() {\n const button = md``;\n let play = false;\n\n invalidation.then(_ => (play = false));\n\n function tick() {\n if (play) {\n snd.play();\n setTimeout(tick, d3.randomExponential(viewof lambda.value)() * 1000);\n }\n }\n\n d3.select(button).on(\"click\", function() {\n play = !play;\n d3.select(button).text(play ? \"Stop ☢️\" : \"Start ☢️\");\n tick();\n });\n\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":770,"value":"viewof snd = {\n const message = html`

[Sound for ☢️]`;\n  message.value = new Audio(`data:audio/wav;base64,UklGRnwAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YVgAAAAAAEsAKQFlAooD+wMhA5cAZvwY98rx/+1r7Y/xZ/sUC7wfgTfIT5NlBXbcftx+BXaTZchPgTe8HxQLZ/uP8Wvt/+3K8Rj3ZvyXACED+wOKA2UCKQFLAAAA`);\n  return message;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":686,"value":"n = 2500","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}