Machine-readable page content
Canonical: https://semiotic.nteract.io/examples/plinko-quantile-dotplot
Plinko Quantile Dotplot
Forecast uncertainty as falling outcomes
Will the forecast clear the line? Every ball is one draw from the posterior; they rain through the board and settle into a dotplot of the whole distribution. The threshold splits them into wins and losses — drag it and each ball re-colors as the odds shift, with no re-drop.
starting0live0queued
Conversation Arc
disabledno events yet
Chance above threshold45%
Median draw49.6%
90% interval43.4% to 56.1%
Visible tokens96 of 1400
Toss-up district
A local forecast gives the measure a narrow edge, but the posterior still crosses 50% often.
0.0s
Settled Quantile Dotplot
The dotplot is not a separate summary. It is laid out from the sameposterior-sample tokens that fall through the board.
Implementation
JSX
import { GaltonBoardChart } from "semiotic/physics" import { generateTokens } from "semiotic/recipes" const tokenSet = generateTokens(posteriorSamples, { tokenType: "dot", tokenSemantics: "posterior-sample", countStrategy: "posterior-sample", tokenCount: 96, }) const drops = tokenSet.tokens.map((token) => ({ id: `posterior-${token.index}`, value: token.sample, token, })) // Threshold is NOT baked into the data or the key. Coloring by a function of // the live threshold recolors every body on repaint — dragging the slider // re-classifies wins/losses in place, without re-running the drop. const colorByOutcome = (d) => (d.value >= threshold ? "win" : "loss") <GaltonBoardChart key={`${scenario.id}-${tokenCount}-${runId}`} data={drops} valueAccessor="value" valueExtent={posteriorDomain} colorBy={colorByOutcome} bins={13} ballRadius={8} seed={scenario.seed} referenceLines={{ value: threshold, label: `${threshold.toFixed(1)}%` }} frameProps={{ onTick, onBodyPointerDown }} />