The Wheel of Urines — 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/urine-wheel

The Wheel of Urines

Before laboratories, a physician read disease from the color of urine. The medievalrota urinarum ringed twenty named colors around a chart and tied each to a stage ofdigestio — the body's “cooking” of the humors. It is, in modern terms, a node-link diagram in a circle, so Semiotic draws it as one: a custom radial network layout, every flask and roundel a real, navigable mark.

Inspectable recipe contract: semiotic.recipe.urine-wheel.v0. This is asituated explanatory chart, not a comparison chart wearing a historical theme: the wheel preserves the worldview that organized colors into diagnoses.

Intent Mark · explanation

NetworkCustomChart: explanation for general-cultural. The historical wheel idiom teaches both the relationships and the worldview that organized them.

{ "ididVersion": "0.1", "chartId": "urine-wheel", "title": "Rota Urinarum", "intent": { "primary": "explanation", "secondary": [ "relationship", "situated-reading" ] }, "audience": { "primary": "general-cultural", "familiarityAssumptions": { "radialNetwork": "low", "diagnosticWheel": "low", "colorSpectrum": "high" }, "literacyTargets": [ { "feature": "historically situated evidence", "rationale": "Readers learn both the relationships and the worldview that organized them." } ] }, "reception": { "channels": [ "visual", "interactive", "screen-reader", "agent" ], "strengths": [ "memorable", "situated", "exploratory", "teaching-friendly" ], "risks": [ "unfamiliar form", "historical color semantics can be mistaken for modern medical evidence" ], "scaffolds": [ "legend", "layered description", "provenance annotations", "accessible table", "grouped navigation" ], "memorableForm": true }, "designContract": { "chartFamily": "NetworkCustomChart", "whyThisForm": "The historical wheel idiom teaches both the relationships and the worldview that organized them.", "whyNotDefault": "A bar chart would enumerate colors or diagnoses but erase the spectrum, the many-to-one relationships, and the situated act of reading the wheel.", "risks": [ "unfamiliar form", "historical color semantics can be mistaken for modern medical evidence" ], "misuse": [ "presenting historical associations as modern medical claims", "removing textual provenance", "using color without names and connections", "flattening the wheel into decorative radial placement" ] }, "accessibility": { "description": "A custom radial network connecting 20 named urine colors to 7 stages of digestion. Color nodes form a continuous white-to-gold-to-black ring; diagnosis nodes sit at the mean angle of the colors connected to them. Gold and ruddy colors gather around perfect digestion, while pale colors lead toward indigestion and dark colors toward burning and mortification. This is a situated explanatory chart: its historical wheel idiom teaches the medieval diagnostic worldview while interaction and text scaffolds keep that unfamiliar form receivable.", "navigation": true, "dataFallback": true, "manualChecks": [ "real screen-reader behavior", "keyboard order quality", "custom metaphor comprehension", "animation distraction" ] }, "provenance": { "reviewStatus": "historical interpretation reviewed in docs", "generatedBy": "Semiotic recipe intelligence" } }

named urine colors

stages of coction

hand-placed x/y positions

Rota Urinarum — The Wheel of Urines

Twenty uroscopy colors joined to the stage of digestion each one signifies

Trace a humorHover a flask to follow it to the digestion it signifies.

Reading the wheel

The colors are not arranged arbitrarily. They form a single spectrum that wraps the ring: the two pathological extremes — Albus (white, the raw, uncooked humor) andNiger (black, the humor burnt to death) — meet at the bottom, whileRufus and the golds, the urines of perfect coction, crown the top. Read clockwise down the right side and the urine grows ever more “cooked”: gold, red, wine-dark, green, lead, black. Continue up the left side and it runs back from cold white through the pales to gold. Hover any flask to trace it to the diagnosis it signifies; hover a roundel to light every color that points to it.

A network drawn in a ring

The twenty flasks are placed at even angles around the rim. Each of the seven diagnosis roundels is positioned at the unit-vector mean angle of the colors that connect to it — so “perfect digestion,” fed by the golds clustered near the top, settles at the crown, while “mortification,” fed by the dark urines, settles near the bottom. Nothing is hand-placed; move a color to a different diagnosis and its roundel drifts to follow. The spokes leave each flask radially and fan apart by how far a color sits from its diagnosis's center, echoing the original's sweeping connectors.

JSX

import { NetworkCustomChart } from "semiotic" import { networkHitTarget, polarToXY, xyToAngle, TAU } from "semiotic/recipes" function urineWheelLayout(ctx) { const { plot } = ctx.dimensions const center = { x: plot.width / 2, y: plot.height / 2 } const rOuter = Math.min(plot.width, plot.height) / 2 - 92 const rInner = rOuter * 0.45 const slot = (order) => (order / 20) * TAU // clockwise from the top // 20 colors at even angles around the rim. const colors = ctx.nodes.map((n) => n.data ?? n).filter((d) => d.kind === "color") const colorPos = new Map( colors.map((c) => [c.id, polarToXY(slot(c.order), rOuter, { center })]) ) // Each diagnosis settles at the *unit-vector mean angle* of its colors, so // "perfect" rides up under the golds and "mortification" sinks by the blacks. const place = (members, r) => { const a = members.map((c) => slot(c.order)) const angle = xyToAngle(mean(a.map(Math.sin)), mean(a.map((x) => -Math.cos(x)))) return polarToXY(angle, r, { center }) } return { // transparent, keyboard-navigable, annotation-anchorable hit nodes — // the visible flasks + roundels are drawn by hand in `overlays`. sceneNodes: nodes.map((n) => networkHitTarget({ x: n.x, y: n.y, r: n.hitR, datum: n.raw, id: n.id })), overlays: <WheelArt colors={colorPos} diagnoses={diagPos} />, } } <NetworkCustomChart nodes={URINE_NODES} edges={URINE_EDGES} layout={urineWheelLayout} layoutConfig={{ language, showTree }} // geometry-changing config only selection={{ name: "urine-wheel-active" }} // highlight restyles, no relayout annotations={physiciansNotes} // pointId-anchored, with provenance description="A medieval uroscopy wheel…" accessibleTable frameProps={{ background: "transparent", tooltipContent: renderTooltip }} />

What the custom layout inherits

Because every flask and roundel is emitted as a networkHitTarget, this hand-drawn diagram is a first-class Semiotic chart. It is fully keyboard navigable (Tab into the wheel, then arrow between marks); it carries a screen-reader data table and a layered description; the physician's notes are real annotations anchored to nodes by id and carrying provenance (a human gloss, not an inference); and the toolbar's export button writes the whole wheel to SVG or PNG. The Latin/English toggle rides the cheap layoutConfig path (the layout re-runs without re-ingesting the graph), while the highlight interaction is cheaper still: it flows through the shared selection store and the overlay restyles viauseCustomLayoutSelection — no relayout at all.

Color names and their similes (ut aurum — “like gold”) follow the uroscopy tradition of Gilles de Corbeil and the Articella; the seven central glosses echo the prognostic phrases inscribed in printed wheels such as Ullrich Pinder'sEpiphanie Medicorum (1506). The arrangement, colors, and translations are encoded as data; all positions are generated at render time.