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).