Probability machine

A working Galton board. Each ball makes a fair coin flip at every peg, so the bins fill with a binomial distribution.

Experimental May change in any minor version before 1.0.

In this chapter 14 pages

Default

Eight rows, thirty balls, fair coin. Click or press Enter on it to run again with new random flips.

astro

<Machine interactive />

More balls, a biased coin

Twelve rows, 120 balls, p = 0.3. The pile shifts left, toward 12 times 0.3, about 3.6 rights per ball.

astro

<Machine rows={12} balls={120} p={0.3} interactive />

Options

Attribute	Effect	Default
`rows`	Rows of pegs, 2 to 16. There is one more bin than rows.	`8`
`balls`	Balls dropped per run, up to 400	`30`
`p`	Chance of bouncing right at each peg	`0.5`
`interactive`	Click or Enter runs it again; the element becomes a button	`false`
`autoplay`	visible runs it when it scrolls into view, paced to finish within five seconds; none draws the settled state	`visible`
`label`	Accessible description. After each run the counts in each bin are added to it.

The element fires ply-machine-done with the final counts, so a demo can print them. Call run() to drop a new set, run(false) to sample a new set and show it settled, and settle() to jump to the end of the current run.

Without JavaScript

The server renders the pegs and a settled pile from the expected counts, so the figure is complete before any script runs, in RSS readers, and with scripts off. Reduced motion shows the settled pile as well.

html

<ply-machine class="ply-machine" rows="8" balls="30" role="img"
  aria-label="Probability machine" style="--rows:8;--bins:9">
  <span class="ply-machine__funnel"></span>
  <span class="ply-machine__pegs"></span>
  <span class="ply-machine__bins">
    <span style="--n:0"></span><span style="--n:1"></span><span style="--n:3"></span>
    <span style="--n:7"></span><span style="--n:8"></span><span style="--n:7"></span>
    <span style="--n:3"></span><span style="--n:1"></span><span style="--n:0"></span>
  </span>
</ply-machine>
<script type="module" src="https://dario-loi.github.io/polytope/kit/js/machine.js"></script>

Loading indicator

Loading Two balls take turns falling through three rows of pegs. It inherits the font size.

html

<span class="ply-loading" role="status" aria-label="Loading"><i></i></span>