Custom Charts — Examples — 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/examples

Examples

The escape-hatch HOCs (XYCustomChart, OrdinalCustomChart,NetworkCustomChart, GeoCustomChart) are at their best on charts the catalog can't draw. This page collects complete, copyable examples — a layout function plus the chart that hosts it.

Paris isometric landmarks

The full-bleedParis, Isometric City of Lightsexample uses GeoCustomChart and isometricLandmarkLayout to turn live geographic landmark candidates into a strategy-game board with replaceable pixel sprites and a deterministic offline fallback.

Boba cups

A pictorial bubble-tea chart from Krist Wongsuphasawat'sBoba Science. Each drink is one ordinal item on the band scale; its tea, tapioca, and ice volumes solve a drink height inside a conical-frustum cup. bobaLayout emits a transparent hit-rect per cup carrying the volumes and pearl/ice counts (so hover, tooltips, selection, SSR evidence, and transitions all work), and draws the cup silhouette, tea fill, tapioca pearls, ice cubes, lid, and straw as pointer-events-none SVG overlays keyed by drink.

JSX

import { OrdinalCustomChart } from "semiotic/ordinal" import { bobaLayout } from "semiotic/recipes" const drinks = [ { name: "Classic", teaVolume: 470, bobaVolume: 95, iceVolume: 60 }, { name: "Extra Boba", teaVolume: 360, bobaVolume: 240, iceVolume: 45 }, { name: "Light Ice", teaVolume: 500, bobaVolume: 95, iceVolume: 12 }, { name: "Mega", teaVolume: 660, bobaVolume: 150, iceVolume: 120 }, ] <OrdinalCustomChart data={drinks} categoryAccessor="name" // one cup per drink, on the band scale layout={bobaLayout} // emits a transparent hit-rect per cup layoutConfig={{ categoryAccessor: "name" }} // + the cup, tea, pearls, ice, straw as overlays width={760} height={420} />

The same chart, two ways

This boba chart also appears in theGoFish DisplayList gallery, where it ishand-written as a DisplayList document — no Semiotic layout function at all, just emitted render-IR primitives that the GoFish adapter maps onto the same custom-layout surface. The two are worth comparing:

Here (a Semiotic custom layout): you write a layout(ctx)that reads ctx.scales / ctx.dimensions and returns scene nodes + overlays. Semiotic owns the band scale, sizing, and re-layout; the cup geometry is yours.
There (a hand-emitted DisplayList): you (or another tool) emit absolute-pixel primitives directly and the adapter renders them. No layout callback, no Semiotic scales — the document is the chart.

Both land on the same runtime — hit-testing, tooltips, accessibility, SSR — which is the point: the custom-layout surface accepts either a layout function or a baked document.