Cookbook — Isotype Chart — 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/cookbook/isotype-chart

Isotype Chart

Isotype charts replace abstract magnitudes with repeated semantic tokens: one visible sign can mean one observed person, one bundled unit, one possible outcome, or one case in a risk grid. Modern Semiotic isotype work uses reusable glyph scene nodes plus token helpers from semiotic/recipes, so those semantics stay explicit instead of being hidden inside a drawing overlay.

The Visualization

Based on a beautiful icon chart by Lisa Charlotte Rost. This isotype chart uses OrdinalCustomChart: tokenLayer marks each visible person as an observed-unit and turns those tokens into reusable Semiotic glyph scene nodes, while each column has one transparent hit target so hover and keyboard focus read the bin as a whole.

import { OrdinalCustomChart } from "semiotic" import { hitTargetRect, tokenLayer } from "semiotic/recipes" // The layout emits: // tokenLayer({ icon: "person", tokenSemantics: "observed-unit" }) // as datum-less glyph scene nodes for the visible signs // plus one hitTargetRect(...) per column for grouped hover/focus. const frameProps = { /* --- Data --- */ data: [{ bin: "-0.95", writeviz: -0.95, people: [{ type: "viz" }], count: 1, journalistCount: 0, vizCount: 1, label: "1 respondent at -0.95" }, { bin: "-0.90", writeviz: -0.9, people: [{ type: "viz" }, { type: "viz" }], count: 2, journalistCount: 0, vizCount: 2, label: "2 respondents at -0.90" }, ... ], /* --- Size --- */ margin: { top: 60, bottom: 70, left: 10, right: 80 }, width: 700, height: 370, /* --- Layout --- */ layout: function isotypeGlyphLayout(ctx) { // Emits one transparent hit target per column plus // tokenLayer({ tokenSemantics: "observed-unit", icon: "person" }) // as datum-less glyph scene nodes. return { nodes: [...columnHitTargets, ...personGlyphs], overlays } }, /* --- Process --- */ rExtent: [0,9], oExtent: ["-0.95","-0.90", ... ], valueAccessor: "count", categoryAccessor: "bin", /* --- Customize --- */ title: "Survey respondents by daily writing-vs-visualization balance", showAxes: false, /* --- Interact --- */ enableHover: true } export default () => { return <OrdinalCustomChart {...frameProps} /> }

How It Works

The example is an OrdinalCustomChart. The layout emits one transparenthitTargetRect per column so hover, focus, and annotations resolve to the meaningful bin, then emits datum-less glyph scene nodes for each visible person sign. The running example passes the observed people for each bin intotokenLayer, which creates explicit observed-unit tokens before the custom layout places them on the ordinal scale:

JSX

import { hitTargetRect, tokenLayer } from "semiotic/recipes" function isotypeGlyphLayout(ctx) { const bandWidth = ctx.scales.o.bandwidth() const chartHeight = ctx.dimensions.plot.height const unitHeight = Math.abs(ctx.scales.r(0) - ctx.scales.r(1)) const glyphSize = Math.max(1, Math.min(unitHeight - 2, bandWidth * 0.8 * (40 / 18))) const hitTargets = ctx.data.map((column) => { const x = ctx.scales.o(column.bin) || 0 return hitTargetRect({ x, y: 0, width: bandWidth, height: chartHeight, datum: column, id: column.bin, }) }) const glyphs = ctx.data.flatMap((column) => { const x0 = ctx.scales.o(column.bin) || 0 return tokenLayer({ input: { data: column.people }, encoding: { tokenType: "glyph", tokenSemantics: "observed-unit", countStrategy: "actual", icon: "person", labelPolicy: "text-plus-token", }, options: { tokenSize: glyphSize, color: (unit) => ctx.resolveColor(unit.datum.type), datum: null, idPrefix: column.bin, positionToken: (unit) => { const cellTop = ctx.scales.r(unit.index + 1) return { x: x0 + bandWidth / 2, y: cellTop + (unitHeight - glyphSize) / 2 + glyphSize, row: unit.index, column: 0, } }, }, }).nodes }) return { nodes: [...hitTargets, ...glyphs] } }

Key Takeaways

Custom chart as backbone — the frame provides scales, margins, responsiveness, hover/focus plumbing, and annotations; the custom layout controls the repeated signs.
Token semantics are explicit — observed-unit,unitized-measure, risk-case, andpossible-outcome describe what a repeated mark means before it is drawn.
Glyphs are real scene nodes — they render on canvas and SSR/SVG, carry stable transition identity, and share the same GlyphDef used in legends and page chrome.
One hit target per logical mark — repeated signs can be datum-less while an invisible target represents the whole bin for accessible interaction.

Glyph Marks — composite pictograms and token fills
Recipe Chrome Kit — token and glyph helpers
BarChart — continuous comparison alternative