d3-blueprintBuild reusable D3 charts

A modern micro-framework to compose reusable D3 charts with TypeScript

Composable Layers

Each layer owns its D3 data-join lifecycle (enter, merge, exit, and transitions). Combine layers freely to build complex visualizations from simple building blocks.

Reactive Config

Define typed config properties with getter/setter transforms and default values. Change a config, call draw(), and watch everything update.

Plugin System

Encapsulate cross-cutting behavior like tooltips, crosshairs, and responsive resize into reusable plugins that hook into the chart lifecycle automatically.

Nested Attachments

Compose charts from smaller charts. Attach reusable sub-components like axes or legends that draw in sync with the parent.

Built-in Transitions

Layers support transition events out of the box. Animate enter, merge, and exit phases with d3-transition with no manual wiring needed.

Tiny & Dependency-Free

Only peer-depends on d3-selection and d3-transition. Bring your own scales, shapes, and layouts with no monolithic D3 bundle required.

Raw D3

ull control, but every chart is a one-off script. No reuse, no structure, lots of repeated setup code.

Total flexibility
No structure
Copy-paste heavy

High-level libraries

Quick to start, but you hit walls fast. Custom behavior means fighting the abstraction or ejecting entirely.

Quick prototyping
Limited customization
Abstraction lock-in

Best of both

d3-blueprint

Structure without abstraction. You still write D3 code, but layers, configs, and lifecycle hooks make it composable and reusable.

Full D3 access
Composable layers
Reusable by design