Custom Charts — Glyph Marks — 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/custom-charts/glyph-marks

Glyph Marks

Stream marks were circles only. The symbol scene-node adds aper-datum shape channel: a glyph drawn from a d3-shapesymbol path (or a custom path), painted on canvas and in SSR/SVG, and hit-tested + keyboard-navigated as a unit like any other mark. The path generator is exported so legends can match the marks exactly.

It’s a cross-pipeline primitive: network, XY, and ordinal custom layouts all emit it (one shared symbolPath implementation backs canvas, SVG, and hit-testing across every chart family), andScatterplot +SwarmPlot expose it as the symbolByencoding — each mark becomes a glyph, with size still tracking sizeBy/pointRadius. Network layouts emit { cx, cy }; XY/ordinal emit { x, y }.

Named shapes

Eight named glyphs ship today (seven from d3-shape plus a customchevron). symbolPathString(name, size) returns an origin-centered SVG path for any of them; symbolExtent gives its true radius (used by packing so pointy shapes don’t overlap).

circle

square

triangle

diamond

star

cross

wye

chevron

JSX

import { symbolPathString } from "semiotic/recipes" // inside a network custom layout, emit a symbol scene node: sceneNodes.push({ type: "symbol", cx, cy, size: Math.PI * r * r, symbolType: "star", // or a custom `path` style: { fill, opacity }, datum, id, })

Two encoding models

There are two ways to use shape, and they answer different design questions:

Shape replaces the mark (symbolAccessor /symbolMap): the whole mark is the shape. Use when shape is a primary encoding and every datum should read as one of a few categories.
Composite glyph (iconAccessor / iconMap): the base mark stays a filled circle and only mapped values get a stroked icon drawn inside. Use when most marks are alike and a minority are flagged — the “mostly plain circles, a few are marked” pattern.

Business/commercial

Civil

Amateur

Defense

The composite-glyph decorator is drawn in the layout’s overlays layer (not as a second scene node), so it never becomes a duplicate hit/nav target over its own base mark. See it driving ~3,000 satellites on theSatellites in Space recipe.

Composite pictograms — the `glyph` node

Named shapes are single paths. The glyph scene node goes a step further: amulti-part vector pictogram — a GlyphDef of paths withrole-token paints ("color" /"accent"), stamped per datum with each node’s actual inks, the way a classic pictogram plate reused one cut in many colors. Definitions carry ananchor (feet-down signs stand on baselines and terrain) and afraction/fractionStart window for partial fillswith an optional ghostColor silhouette — the ISOTYPE partial-symbol convention used by unitized token records.

It is a full citizen of the pipeline: canvas and SVG/SSR rendering, hit-testing and keyboard navigation over the drawn bounds, annotation anchoring bypointId/id, and enter/move/exit transition identity. All four custom-layout families emit it (network uses cx/cy; XY, ordinal, and geo use x/y), and the <Glyph> React component renders the same definition in overlays, legends, recipe icon callbacks, and page chrome — one definition, no drift.

For higher-level isotype and icon-array work, tokenLayer adds the semantic contract above the tallying math: a token says whether it is an observed unit, a unitized measure, a possible outcome, or a risk case, then the layer places and stamps dots, icons, or glyph scene nodes.

generateTokens(3.6, { countStrategy: "unitized", unitValue: 1 }) → three solid signs and a 60% sign with a ghost silhouette. Symbols repeat; they do not grow.

JSX

import { tokenLayer } from "semiotic/recipes" const SERVER_SIGN = { viewBox: [40, 40], anchor: [0.5, 1], // feet land on (x, y) parts: [ { d: "M8 3h24v34H8z", fill: "color" }, { d: "M12 9h16v5H12z…", fill: "accent" }, ], } // inside any custom layout: describe the token semantics, then stamp glyphs const serverLayer = tokenLayer({ input: site.powerMW, encoding: { tokenType: "glyph", tokenSemantics: "unitized-measure", countStrategy: "unitized", unitValue: 100, unitMeaning: "one server sign = 100 MW", }, options: { x, y: terrainY - 40, columns: 4, cellWidth: 12, cellHeight: 12, anchor: [0.5, 1], tokenSize: 11, glyph: SERVER_SIGN, color: statusColor, accent: "#fff", ghostColor: paperDeep, datum: site, idPrefix: site.id, }, }) nodes.push( ...serverLayer.nodes, ) // the same definition, as React chrome (legends, overlays, prose): import { Glyph } from "semiotic/recipes" <Glyph def={SERVER_SIGN} size={14} color="#34383b" />

See the whole system at work onThe Buildings Behind AI andLake Travis, in Signs — relief-section maps, unit grids, and process pictures built from one shared sign set.

Shade — a continuous channel on a hue

Pair shape with shade / makeShade, which interpolate a hue’s lightness in CIELAB so the hue stays put while only lightness moves — a categorical color can then carry a second continuous channel (age, recency, magnitude):

JSX

import { makeShade } from "semiotic/recipes" const shade = makeShade("#7b52c9") // capture once per hue const fill = shade(t) // t in [0,1]: 0 lighter, 1 darker