Skip to main content

Gallery

Live, touchable charts — not thumbnails. Hover any of them to see the crosshair track; each is the exact same @pond-ts/charts primitives you'd compose yourself. Build it → opens the chart's own page — where the data came from, the minimal version in 10–20 lines, and the knobs worth trying. Story ↗ jumps to its full Storybook coverage (every prop, every variant).

Grouped by domain, because "can this library draw my thing?" is usually asked from inside a problem. If you're shopping by shape instead, the chart-type reference is the index by primitive.

Ops & infrastructure​

Where most evaluators start: hosts, latency, error budgets, and the incident you're explaining on Monday.

Ops dashboard

Requests/sec over error rate — two rows, one shared time axis and cursor.

Annotated chart

Latency data with an incident region, a deploy marker, and an SLA baseline — two registers, one hue rule.

Variance band

A rolling p5–p95 latency envelope with the p50 centreline — nested bands plus a line.

Latency percentiles

Hourly box-and-whisker buckets from five pre-computed quantile columns.

Network traffic

Six hours of a real CERN border router — in filling up, out filling down from a shared zero line.

Traffic by interface

The same six hours, stacked: seven interfaces as tonal slabs adding up to the site total.

Multi-host CPU

One line per host out of one long-form series — plus the 24-minute hole a node recycle leaves.

Latency envelope

p50 inside a p90 band inside a p99 band — watch the tail tear open while the median holds.

SLA & incidents

A week of error rate over the budget it spent — incident regions, deploy markers, an objective line.

Live tail

Genuinely streaming: a LiveSeries with a retention window and a value pill at the leading edge.

Site traffic dashboard

A faithful replica of the operations dashboard the CERN capture comes out of — in the product's own palette, not pond's.

Volume history

Thirty-six years of real ESnet traffic on a log axis — 19 GB a month to 262 PB, with a fitted trend.

Finance​

Market time is not wall-clock time, so these charts sit on a trading calendar: the weekends, the ten holidays and the two half-days are collapsed out of the axis rather than drawn as dead space. Candles, a volume row, a study's appended columns and a derived curve — the same four primitives you'd compose yourself.

The prices are modelled, not measured. Every feed worth having forbids redistribution, so rather than quietly ship someone's bars these run on a seeded process model — opening gaps, volatility clustering, regimes, volume that answers price. The session calendar is real; the prices are not.

Financial terminal

Daily OHLC candles with the crosshair cursor and the axis-pill OHLC readout.

Trade ticks

A data-driven scatter: radius encodes trade size, colour encodes up/down.

Candles on a trading calendar

A year of daily OHLC where the axis holds only open market time — every weekend, holiday and half-day collapsed out.

Price and volume

Two rows, two scales, one x range and one cursor — with the volume bars coloured by each session's own direction.

Bollinger bands

A study appends three columns; a band and a line read them back. Watch the window sweep 10 → 40 sessions.

Drawdown

How far under its own running peak the price is — an area hanging below a fixed zero baseline, drawing itself in.

Weather & climate​

The domain with the best public data — every card here draws measured NOAA or NASA numbers, not a model of them. Three of the four are one airport's 2024: the same station asked about its temperature, its rain and its wind.

Temperature range

A year of daily min/max as a band, with a 15-day mean drawn through it — the band widens into summer.

Rainfall & running total

Daily rain as bars, the year's cumulative total as a line — two units, two y-axes, one row.

Climate stripes

146 years of global temperature anomaly, one bar per year — every bar the same height, the colour carrying the value.

Wind direction

8,735 hourly reports as a categorical strip, and the histogram underneath is the shaded window — counted live as it sweeps the year.

Energy​

Grid data is where composition, crossover and signed values all turn up at once. The first three cards are the same real weekend — Easter 2025 in Germany, the quietest demand day of the year meeting a big solar peak. The last two are a different grid on a stranger evening — Spain, during the total solar eclipse of 12 August 2026: what demand did, and what solar did.

Grid mix

Eight generation sources stacked as cumulative areas — thermal in slate, renewable in teal, four tonal steps each.

Renewables vs demand

Two translucent areas that cross: for 1 h 45 m, wind and solar out-produced the whole country's load.

Negative prices

Day-ahead power prices above and below zero — eight hours where sellers paid to deliver.

Demand during an eclipse

Spain's demand against its forecast as the Moon crossed the Sun — a 2.13 GW dip, timed to the minute.

Solar during an eclipse

Eclipse-day solar over the three evenings before it at the same clock time — a second sunset, 4.3 GW under the baseline.

Fitness & health​

Activity data is the awkward case every charting library gets asked about: irregular sampling, dropouts where the sensor coasted, and a duration axis rather than a wall-clock one.

Activity chart

A ride's elevation profile, filled — the shape an activity tracker reaches for constantly.

Distribution

Response-time histogram on a value axis, inferred from the bins — not a time axis.

Science & measurement​

Instruments, and what they record: a buoy, a seismometer, a tide gauge, an air monitor and a satellite record of one patch of the Pacific. All five datasets here are real, measured, public-domain observations — nothing modelled — and between them they cover the axis that isn't time, the trace that's denser than the screen, the reading that only means something next to a threshold, and the year that isn't finished yet.

Wave spectrum

Energy density against frequency — a ValueSeries with no time column at all, and a second axis relabelling it as period.

Seismograph

12,800 samples at 40 Hz in one line — denser than the plot has pixels, so M4 decimation strokes a few hundred instead.

Tides

A week of water level against its harmonic prediction — the gap between them is the storm surge.

Air quality

Hourly PM2.5 through wildfire smoke, banded by the AQI categories — the value axis as a verdict, not a number.

Day-of-year overlay

45 years of El Niño's sea-surface temperature stacked on one Jan–Dec axis — the pack muted, three years named, this one still running.

Measles and the vaccine

Fifty states, eighty-one years, colour carrying cases per 100,000 on a log scale — and one vertical discontinuity in 1963.

Product, transport & statistical​

Counting what people make and do. The first card here is as meta as it gets: the library's own repository, drawn by the library.

Contribution heatmap

The GitHub profile grid, of pond, by pond — 1,001 commits in eighteen weeks, and no weekend stripe.

Where these come from​

Every card above is one of the chart-type support matrix's draw layers, seeded with deterministic sample data (no Math.random(), no Date.now() — what you see is what renders on every visit). None of it is a special "demo mode": the same ChartContainer / ChartRow / Layers composition you'd write yourself, mounted for real. Fixture provenance — where each dataset came from, its licence, and what was dropped — lives in each fixture's header (the conventions are in src/examples/lib/README.md).

The cards that move share one animation loop, animate only while they're on screen, and hold a still frame if your system asks for reduced motion.

  • Storybook — the systematic, per-prop knob walk each card's Story link jumps into.
  • Using @pond-ts/charts — install notes and integration gotchas.
  • Theming — the ChartTheme model behind every card here (they all run the docs site's own live theme, useSiteChartTheme).