Charts

A frame for charts drawn by any library: title, legend, plot, data table, source.

Experimental May change in any minor version before 1.0.

In this chapter 14 pages

Validation accuracy by epoch

Synthetic example data

Model A
Model B
Model C

Data table

Epoch	Model A	Model B	Model C
0	0.440	0.360	0.340
10	0.592	0.477	0.520
20	0.689	0.563	0.620
30	0.751	0.627	0.674
40	0.791	0.674	0.704
50	0.816	0.710	0.720
60	0.832	0.736	0.729
70	0.842	0.755	0.734
80	0.849	0.769	0.737
90	0.853	0.780	0.738
100	0.855	0.788	0.739

astro

<Chart title="Validation accuracy by epoch" subtitle="Five seeds, shaded band is one standard deviation"
  legend={[{ label: "GCN", shape: "line" }, { label: "SCN", shape: "line" }]} source="Source: our runs, 2026">
  <svg>...</svg>                                <!-- D3, Observable Plot, or hand-drawn -->
  <table slot="table" class="ply-table">...</table>
</Chart>

Prop	Effect
`title`	What the chart shows, as a statement or a question
`subtitle`	Units, sample, or how to read it
`legend`	Series: { label, slot, shape }. Shown for two or more series.
`source`	Where the data comes from
`table slot`	The same numbers as a table, behind a toggle

With D3 or Observable Plot

Read colors from the custom properties so charts follow the theme:

const css = getComputedStyle(document.documentElement);
const series = Array.from({ length: 8 }, (_, i) => css.getPropertyValue(`--ply-viz-${i + 1}`).trim());

Plot.plot({
  color: { range: series },
  style: { fontFamily: "var(--ply-font-text)", background: "transparent" },
  marks: [Plot.lineY(data, { x: "epoch", y: "acc", stroke: "model", strokeWidth: 2 })],
});

Static exports (paper figures) should use the token module instead, so the colors are fixed: import { viz } from "@dario-loi/polytope/tokens".

.ply-tooltip is the black hover card used above; .ply-legend lists series with a dot, line, or bar key. .ply-texture adds a diagonal hatch for print and forced-colors mode.

The color rules live in Foundations: Charts.

With D3 or Observable Plot

Tooltip and legend