Static documentation

Data Visualisation Catalogue Gallery

Rendered markdown notes for the catalogue review, compiler mapping, implementation tracker, and chart method specs.

38 chart methods
10 with reference assets
43 documents
DashboardCompiler

System Docs

Compiler Schema System Overview

Overview

Data Visualisation Catalogue Gallery Review

Chart Methods

Arc DiagramArea GraphBar ChartBubble ChartBullet GraphCalendarCandlestick ChartCircle PackingDensity PlotDonut ChartDot Matrix ChartError BarsGantt ChartHeatmapHistogramLine GraphMarimekko ChartMulti-set Bar ChartNightingale Rose ChartOpen-high-low-close ChartParallel Coordinates PlotPie ChartPopulation PyramidProportional Area ChartRadar ChartRadial Bar ChartRadial Column ChartScatterplotSpan ChartStacked Area GraphStacked Bar GraphStream GraphSunburst DiagramTimelineTimetableTree DiagramTreemapViolin Plot

Project Notes

Chart Catalogue Implementation TrackerChart Compiler Gap Analysis For The Data Visualisation CataloguePolar-Axis And Arc Layout PassStatistical And Financial Interval Pass

Statistical And Financial Interval Pass

Date: 2026-05-11

Scope And Context

The request was to take the most useful remaining items from compiler-gap-analysis.md, keep that document current, update the compiler gallery pages, and add missing Data Visualisation Catalogue charts that depend on the new compiler pieces.

This pass stayed inside the Cartesian compiler surface: raw table transforms, numeric/band/ordinal scales, generated guides, and existing rect, line, and point glyphs. It avoided larger polar, hierarchy, geo, and density work because the current glyph primitives could unlock more catalogue coverage with less architectural risk.

Major Changes Delivered

  • Added errorInterval and financialInterval transform contracts in app/src/lib/viz/compiler/spec.ts.
  • Implemented grouped error interval rows and ordered OHLC rows in app/src/lib/viz/compiler/transforms.ts.
  • Added explicit numeric scale domain min/max controls in app/src/lib/viz/compiler/scales.ts.
  • Added gallery specs for:
    • app/src/lib/viz/compiler/gallery-specs/error-bars.ts
    • app/src/lib/viz/compiler/gallery-specs/candlestick-chart.ts
    • app/src/lib/viz/compiler/gallery-specs/open-high-low-close.ts
    • app/src/lib/viz/compiler/gallery-specs/span-chart.ts
  • Registered the new charts in app/src/lib/viz/compiler/gallery-specs.ts and app/src/lib/viz/compiler/gallery-specs/types.ts.
  • Updated catalogue docs and trackers:
    • docs/chart-catalogue-gallery/compiler-gap-analysis.md
    • docs/chart-catalogue-gallery/README.md
    • docs/chart-catalogue-gallery/implementation-tracker.md
    • Per-chart docs for Error Bars, Candlestick Chart, OHLC Chart, and Span Chart.

Design Decisions And Tradeoffs

  • Chose errorInterval before density/regression because it unlocks Error Bars with simple, inspectable output rows and does not require generated paths or smoothing.
  • Chose financialInterval because Candlestick and OHLC share the same open/high/low/close contract, so one transform enables two catalogue charts.
  • Added explicit numeric domain bounds instead of a multi-field domain aggregator. This keeps the scale API small while solving immediate OHLC/error-axis needs. A richer domain aggregation policy is still useful later.
  • Reused the existing interval transform for Span Chart. That keeps span charts as another interval rendering mode instead of inventing a chart-specific transform.
  • Left line cap/join styling and time scales for follow-up work. The new charts are faithful enough with separate cap/tick line layers, and temporal scale work is broader than this pass.

Problems Encountered And Resolutions

  • Test list drift: the first test run incorrectly treated errorBars as a numeric-x chart and spanChart as a y-grid chart. Resolution: corrected the guide-spacing test chart lists to match each chart's actual scale orientation.
  • Validation scope: an existing dev server was already listening on localhost:3000. Resolution: reused the running server for browser smoke tests instead of starting a duplicate server on another port.

Verification And Validation

  • pnpm -C app type-check: passed.
  • pnpm -C app test: passed, 17 compiler tests.
  • pnpm -C app lint: passed with three existing warnings in app/src/middleware.ts; none were introduced by this pass.
  • git diff --check: passed.
  • Browser smoke tests against http://localhost:3000/_internal/chart-compiler/*: passed for errorBars, candlestickChart, openHighLowClose, and spanChart; each route showed its expected title, transform declaration, SVG content, and no browser console errors.

Process Improvements

  • Keep guide-spacing test lists grouped by scale orientation. This prevents newly added band-axis charts from being forced through numeric tick expectations.
  • For future chart batches, pick transform clusters that unlock more than one catalogue method. The financial interval transform was a high-yield example because it served both Candlestick and OHLC.
  • Continue updating compiler-gap-analysis.md immediately after implementation, while the current limitations and evidence are still precise.

Agent And Skill Improvements

  • Add a lightweight checklist to the chart-catalogue workflow: when adding a gallery chart, update the type union, registry order, compiler test expected order, docs README, tracker, and gap coverage table in the same pass.
  • Add a note to the Solid/compiler skills that generated guide tests should distinguish numeric, band, and categorical axes before adding new chart ids.
  • Expected benefit: fewer late test-list corrections and more consistent documentation for each new catalogue chart.

Follow-ups And Open Risks

  • P0: Add true time scale support for Gantt, Span, Candlestick, OHLC, and Timeline examples.
  • P1: Add outlier extraction for Box & Whisker Plot and richer statistical policy options for Error Bars.
  • P1: Add regression and density transforms for scatter trend lines, density plots, and violin plots.
  • P1: Add step/smooth path interpolation for richer line/area families.
  • P2: Add reusable line cap/join/dash style params instead of modeling every cap as a separate line layer.