98 fixture specs across 16 categories. Each entry pairs a *.prism.json
spec with a rendered *.svg. Browse the source to learn the spec
shapes; open the SVGs to see what they render. The table/ fixtures
are one exception — a top-level table mark renders only through
the html backend, so those entries link to a rendered *.html file
instead of an <img> preview. The Custom marks
section is the other exception, and has no *.prism.json at all — see
that section for why.
For live interactive rendering in a browser, see live.html.
The table mark renders as an interactive, paginated HTML <table> —
not SVG geometry — so these fixtures link to a rendered *.html file
rather than showing an <img> preview. See Marks ›
Table.
A custom mark (mark: {"type": "custom", "renderer": "…"}) resolves
its renderer name against a Go-level registry (custommark.Register)
at render time — a mechanism only a caller-supplied binary can
exercise, not the shared prism CLI, which has nothing registered
under any name. That means these two fixtures have no*.prism.json companion (unlike every other category on this page,
table/ included): a spec referencing quote-card or stat-card
cannot be plotted by prism plot as committed. See Cookbook › Custom
marks: Why no gallery *.prism.json for these
two
for the full explanation, the exact spec JSON that produced each file
below, and the registered HTMLCustomRenderer implementation’s full
source.
bar_dark_variant is different from the row above it: its spec sets
theme: {"dark_variant": "dark"} instead of picking a theme with
--theme, so the one rendered SVG embeds both the light and dark
palettes and switches between them via @media (prefers-color-scheme: dark) — see Dark variant
pairing. The static
preview above can only show the light rendering (the one your browser
is currently in), so verify the effect one of two ways:
Toggle your OS or browser dark-mode setting while viewing the
<img> above (or open the raw SVG
directly) — the axes, grid, legend, and bar colors all swap without
a re-render.
View source on themes/bar_dark_variant.svg and look for the
@media (prefers-color-scheme: dark) block inside the <style>
element, plus fill="var(--prism-resolved-N)" on the <rect>
elements — those are the doubled CSS custom properties described in
the docs.
bar_category_styles demonstrates theme.category_styles: the theme
maps each quarter value to its own MarkStyle (Q1/Q2/Q3/Q4
each get a distinct fill), and every bar picks up its category’s
color automatically — no spec-level condition block at all. See
Category styles for the
field→value→style shape and how a spec-level condition on the same
field/value would win if one were present.
Each spec declares an animation block plus a key: true channel; the
SVG previews show the initial frame. The tween fires in the browser
web component / WASM runtime when the spec swaps or a new dataset
arrives — see Spec › Animation and
Browser › Animation.
