Frameworks

The d3plus engine (@d3plus/core) is imperative: you create an instance, configure it, and render it. Official wrapper packages fit that lifecycle into the major front-end frameworks, so you pass a declarative config and the wrapper handles instantiation, updates, and teardown for you.

Framework	Package	Render with
React	@d3plus/react	<Treemap config={…} />
Vue 3	@d3plus/vue	<Treemap :config="…" />
Svelte	@d3plus/svelte	<div use:d3plus={{constructor, config}} />
Web Components	@d3plus/element	<d3plus-treemap> (.config = …)
Angular	@d3plus/angular	<d3plus-viz [viz]="Treemap" [config]="…" />

Every wrapper is a thin layer over the same shared core (in @d3plus/dom), so their runtime behavior is identical.

The same chart in every framework

Pick a framework below. Every example on this site has the same panel, so you can copy any chart in the framework you use; your choice is remembered across pages.

ControlsEdit codeGet the code

SVGCanvas

Reset

JSReactVueSvelteElementsAngularCopy

import {Treemap} from "@d3plus/core";

// Renders into <div id="chart" style="height: 300px"></div>
const config = {
  data: [
    {parent: "Group 1", id: "alpha", value: 29},
    {parent: "Group 1", id: "beta", value: 10},
    {parent: "Group 2", id: "gamma", value: 18},
  ],
  groupBy: ["parent", "id"],
  sum: "value",
};

new Treemap()
  .select("#chart")
  .config(config)
  .render();

Install

JavaScript

npm install @d3plus/core

React

npm install @d3plus/react

Vue

npm install @d3plus/vue

Requires vue (^3.4) as a peer dependency.

Svelte

npm install @d3plus/svelte @d3plus/core

Requires svelte (4 or 5) as a peer dependency. The package exports a single action: apply it with use:d3plus, passing the visualization class from @d3plus/core and its config. Because config is reactive, reassigning it (or mutating $state) drives updates automatically.

Web Components

npm install @d3plus/element

Register the elements once (in the browser) with defineElements(), then use <d3plus-…> tags anywhere: plain HTML, Astro, or any framework that renders the DOM. Each d3plus class becomes d3plus-<kebab-case-name> (BarChart → d3plus-bar-chart). Config is set through the .config property (an object, so it can carry accessor functions, unlike string attributes).

Angular

npm install @d3plus/angular @d3plus/core

Requires @angular/core and @angular/common (v20+) as peer dependencies. Published in the Angular Package Format (partial-Ivy), so it works in your app’s AOT production builds.

Shared defaults

Each wrapper has a way to supply defaults merged ahead of every chart’s own config:

JavaScript

Merge your defaults into each config yourself, for example with assign from @d3plus/dom:

import {assign} from "@d3plus/dom";

const defaults = {locale: "es-ES"};
new Treemap().config(assign({}, defaults, config)).render();

React

import {D3plusContext} from "@d3plus/react";

<D3plusContext.Provider value={{locale: "es-ES"}}>
  <App />
</D3plusContext.Provider>

Vue

import {provide} from "vue";
import {D3plusConfigKey} from "@d3plus/vue";

provide(D3plusConfigKey, {locale: "es-ES"});

Svelte

<div use:d3plus={{constructor: Treemap, config, globalConfig: {locale: "es-ES"}}}></div>

Web Components

import {setGlobalConfig} from "@d3plus/element";

setGlobalConfig({locale: "es-ES"});

Angular

<d3plus-viz [viz]="Treemap" [config]="config" [globalConfig]="{locale: 'es-ES'}" />

Shared behavior

Because all wrappers delegate to the same core, they behave identically:

• Tweening across updates. The underlying instance is reused when the config changes, so the chart animates between states instead of restarting.
• Structural diffing. Assigning a config that is structurally identical to the current one (including function-valued accessors, compared by source) is a no-op: no re-render. Set forceUpdate to render on every update regardless.
• Callbacks. A callback runs at the end of each render cycle.
• Teardown. The instance is destroyed automatically when the component unmounts (or the element disconnects).

Wrapper	Config	Global defaults	Force re-render
React	config prop	D3plusContext.Provider	forceUpdate prop
Vue	config prop	provide(D3plusConfigKey, …)	forceUpdate prop
Svelte	action param	globalConfig param	forceUpdate param
Web Components	.config property	setGlobalConfig()	.forceUpdate property
Angular	config input	globalConfig input	forceUpdate input