Sometimes it's better to be discrete — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/examples/sometimes-better-discrete

Sometimes it's better to be discrete

Tokenized reasoning · ISOTYPE · uncertainty

When dots, icons, and tokens beat bars, blobs, and densities.

Should I leave now or wait for the bus?

Arrives within 10 minutes

What should the chart help people do?

Possible worlds

Probability?

estimate it in panel 01 first

Natural frequency82

of 100 commuters make the connection

Expected wait7.7

minutes, kept as measurable length

01 · Continuous

Area is the answer

A density curve has the right math, but reading interval probability means integrating shaded area by eye. Commit to a guess before revealing — that felt effort is the lesson.

Your estimate: 50%

02 · Possible outcomesIDID pick

50 possible arrivals

50 tokens

Kay and Hullman's quantile dotplot: each dot is one equally likely arrival, stacked so interval probability becomes literal counting.

Live results from diagnoseTokenEncoding for exactly the encoding rendered in panel 02 — sabotage it and the critique updates with it.

No warnings. The tokens declare their semantics, the count strategy matches the meaning, and 50 visible tokens is within budget.

03 · Natural frequency

Risk is easier as people

18/100

The same threshold, translated: out of 100 commuters making this exact choice, the highlighted people miss their connection. Fixed denominators keep percentages honest and countable.

04 · Hypothetical outcomes

One possible morning at a time

morning 1

Hullman's HOPs show uncertainty as single possible worlds in sequence. Watch the remembered mornings pile up into the quantile dotplot from panel 02 — a distribution is just many mornings, remembered.

05 · Hybrid encoding

Keep precision where it matters, tokenize where it helps.

The expected wait remains a measurable bar; tokenLayer stamps one bus sign per two minutes on top of it, partial final sign included. The ledger under the axis comes from the token records, so total versus shown stays honest even when a sign is fractional.

06 · IDID recommendation

Quantile dotplot

This task asks readers to estimate probability from a distribution. Quantile tokens turn probability mass into countable possible outcomes.

Token type: dot
Semantics: possible-outcome
Count: quantile
Layout: dotplot

cdf-with-thresholddensity-with-threshold

suggestTokenEncoding maps the task above to the encoding it would hand togenerateTokens; the panel it picks carries the “IDID pick” badge.

A century of counting

1926

ISOTYPE

Neurath · Reidemeister · Arntz

Repeat a sign, never grow it — quantities become countable things.

1995

Natural frequencies

Gigerenzer & Hoffrage

“18 of 100 commuters” beats “18%” — risk as visible cases.

2015

Hypothetical outcome plots

Hullman · Resnick · Adar

Uncertainty as possible worlds, drawn one at a time.

2016

Quantile dotplots

Kay · Kola · Hullman · Munson

“When(ish) is my bus?” — a distribution you can count.

One idea connects pictograms, infographics, icon arrays, and uncertainty visualization: replace an abstract magnitude with things a reader can count — units, cases, and possible worlds. tokenSemantics is that idea as an API.

Implementation

The example is not drawing icons by hand.

Semantics first, then placement, then marks: generateTokens decides what each token means, the dotplot layout Wilkinson-stacks the quantiles, andtokenLayer emits ordinary Semiotic scene nodes with the same canvas, SVG, hover, focus, and accessible-table machinery as every other custom chart.

JSX

import { XYCustomChart } from "semiotic/xy" import { diagnoseTokenEncoding, generateTokens, suggestTokenEncoding, tokenLayer, } from "semiotic/recipes" // 1 · Say what a repeated mark MEANS before anything is drawn. const encoding = { tokenType: "glyph", icon: "bus", // the built-in ISOTYPE bus sign tokenSemantics: "possible-outcome", countStrategy: "quantile", // Kay/Hullman: equally likely arrivals tokenCount: 50, layout: "dotplot", // Wilkinson-stacked quantile dotplot } // 2 · The records carry the ledger and a live design critique. const tokenSet = generateTokens(arrivalSamples, encoding) tokenSet.diagnostics // e.g. TOO_MANY_VISIBLE_TOKENS if you ask for 800 // 3 · Any custom layout stamps them as real scene nodes — canvas + SVG, // hover, keyboard nav, transitions, accessible rows, for free. function busDotplotLayout(ctx) { const { height } = ctx.dimensions.plot const layer = tokenLayer({ input: tokenSet, options: { tokenSize: 17, cellHeight: -19, // negative step: stack up from the axis y: height - 32, valueToX: (arrival) => ctx.scales.x(arrival), color: (t) => (t.sample <= threshold ? "#236d99" : "#c93d3d"), datum: (t) => ({ arrival: t.sample, quantile: t.quantile }), pointId: (t) => `outcome-${t.index}`, }, }) return { nodes: layer.nodes, overlays: <ThresholdLine /> } } <XYCustomChart data={arrivalData} layout={busDotplotLayout} xExtent={[0, 22]} /> // 4 · Or ask for the encoding first — task in, semantics out. suggestTokenEncoding({ taskIntent: "estimate probability", dataType: "distribution" }) // → { recommendedEncoding: "quantile-dotplot", tokenEncoding, rationale, … }