LayerChart

LayerChart is a large collection of composable Svelte chart components for building a wide range of data visualizations, from standard cartesian charts to radial, hierarchical, graph, geographic, and calendar layouts. Rather than shipping a handful of fixed chart types, it exposes primitives — Bars, Spline, Arc, Voronoi, Brush, Axis, Legend, and dozens more — that compose through a shared Chart context, so a bar chart and a choropleth map share the same scale, tooltip, and transform plumbing underneath.

Built on Svelte 5 runes and D3’s calculation modules (d3-scale, d3-shape, d3-geo, d3-hierarchy, d3-force, d3-sankey), LayerChart renders to SVG, Canvas, or HTML depending on the component variant, letting the same chart definitions scale from a few dozen points to dense datasets without switching libraries.

What You Get

• Cartesian charts — Area, Bar, Line, and Scatter charts built from a shared Chart context plus Axis/Grid primitives.
• Radial/polar charts — Arc, Radial Area, Radial Bar, Radial Line, Radar, and Pie charts sharing the same data-binding conventions.
• Hierarchical layouts — Pack, Partition, Tree, and Treemap components wrapping d3-hierarchy.
• Graph visualizations — Dagre-based flow diagrams, force-directed graphs, and Sankey diagrams.
• Geo visualizations — Choropleth, Spike, Bubble, Point, and Globe map components built on d3-geo.
• Low-level primitives — Brush, Voronoi, Highlight, Legend, Tooltip, and dozens of other building blocks for custom charts.
• SVG, Canvas, and HTML render targets — the same chart API renders through whichever backend fits the dataset size.

Common Use Cases

• Building an analytics dashboard that needs bar/line/area charts sharing consistent theming and tooltips.
• Visualizing organizational or file-system hierarchies with Treemap or Partition components.
• Rendering geographic choropleth maps or point overlays without hand-rolling d3-geo projections.
• Building network/dependency graphs with force-directed or Sankey-flow layouts.
• Adding a GitHub-style calendar heatmap to a Svelte app.

Under The Hood

Architecture LayerChart is structured as a layered composition system: high-level chart components (e.g. LineChart.svelte, BarChart.svelte in src/lib/components/charts/) are thin wrappers that delegate to a *.base.svelte implementation and inject a shared Chart/ChartCore context (src/lib/components/Chart/Chart.base.svelte, ChartCore.svelte), which in turn is built on runes-based state modules under src/lib/states/ (chart, series, brush, facet, group, transform) and React-context-like Svelte contexts under src/lib/contexts/ (chart, canvas, geo, facet, layer, settings). Each chart variant ships parallel .svg.svelte, .canvas.svelte, and .html.svelte render targets that share the same props contract, and a deliberately bare ChartCore skips the standard cartesian frame (ChartChildren/Axis/Grid) for geo or fully custom compositions — a documented ~20-30KB gzip savings noted directly in the component’s own comments. Swapping the core Chart context would ripple through nearly every chart component, but the render-target split and the base/wrapper indirection keep each chart type’s own logic isolated from that core.

Tech Stack The package is a Svelte 5 library (peer dependency svelte: ^5.0.0) using $state/$bindable runes throughout its state layer, built via @sveltejs/package/svelte-package into ESM output with per-entry exports (., ./geo, ./hierarchy, ./force, ./graph, ./svg, ./canvas, ./html, ./server, plus per-file ./utils/* and ./*.css). It leans on the D3 ecosystem directly rather than a bundled ‘D3-lite’: d3-scale, d3-shape, d3-array, d3-hierarchy, d3-force, d3-sankey, d3-geo, d3-geo-voronoi, d3-delaunay, d3-contour, d3-interpolate-path, plus @dagrejs/dagre for graph layout and @layerstack/* sibling packages (svelte-actions, svelte-state, tailwind, utils) from the same author’s companion Svelte UX project. It lives in a pnpm workspace monorepo alongside a dedicated docs site (built with mdsx/content-collections) and six framework-integration example apps (shadcn-svelte, skeleton, daisyUI, UnoCSS, svelte-ux, standalone).

Code Quality The packages/layerchart source tree carries an extensive Vitest suite (dozens of *.svelte.test.ts and *.test.ts files colocated with the code they cover, including dedicated browser-mode tests via @vitest/browser/vitest-browser-svelte, a separate bench project for performance regressions, and server/SSR-specific test projects). Code is typed throughout (TypeScript + svelte-check), formatted via Prettier with the Svelte plugin, and CI (.github/workflows/ci.yml) runs typecheck, lint, SSR unit tests, and a dedicated visual-regression workflow with baseline screenshots — a notably rigorous setup for a component library, going well beyond basic unit coverage.

What Makes It Unique Rather than exposing a small number of preconfigured chart types, LayerChart treats every chart as a composition of shared primitives (scales, axes, brush, tooltip, transform) wired through one Chart context, so cartesian, radial, hierarchical, graph, and geo visualizations all reuse the same interaction and theming plumbing instead of each chart type reimplementing it. Coupling that composability with parallel SVG/Canvas/HTML render targets per chart, plus first-class visual-regression and bundle-size CI checks, is an unusually thorough combination for a Svelte charting library, most of which pick a single fixed rendering strategy and a fixed catalog of chart types.