D3plus

Data visualization made easy. An open-source TypeScript library that extends D3 to create beautiful, interactive SVG visualizations with minimal configuration. Tooltips, color assignments, label placements, and more — all handled automatically.

Full documentation and live examples: d3plus.org

Quick Start

React

npm install @d3plus/react

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

const config = {
  data: [
    {id: "alpha", value: 29},
    {id: "beta", value: 10},
  ],
  groupBy: "id",
  size: "value",
};

<Treemap config={config} />;

A global set of styles can be applied using the D3plusContext Provider. Per-component config props override globals on a key-by-key basis via deep merge.

import React from "react";
import ReactDOM from "react-dom/client";
import {D3plusContext} from "@d3plus/react";
import App from "src/App.jsx";

const globalConfig = {
  title: "Shared Title for All Visualizations",
};

ReactDOM.createRoot(document.getElementById("viz")).render(
  <React.StrictMode>
    <D3plusContext.Provider value={globalConfig}>
      <App />
    </D3plusContext.Provider>
  </React.StrictMode>,
);

Vanilla JavaScript (CDN)

<script src="https://cdn.jsdelivr.net/npm/@d3plus/core"></script>
<script>
  new d3plus.Treemap()
    .config({
      data: [
        {id: "alpha", value: 29},
        {id: "beta", value: 10},
      ],
      groupBy: "id",
      size: "value",
    })
    .render();
</script>

Packages

D3plus is a modular monorepo — install only what you need:

For example, to use just the number formatting:

import {formatAbbreviate} from "@d3plus/format";

To get all d3plus types in one import (useful for typing config objects or function parameters):

import type {Treemap, D3plusComponentProps} from "@d3plus/types";

Accessibility

D3plus is built with accessibility in mind. Every visualization automatically includes ARIA attributes, semantic roles, and contextual screen reader labels tailored to each chart type. Features include optional SVG <title> and <desc> elements, inline data tables for assistive technology, color contrast utilities, and localized accessible text. See the Accessibility documentation for a full WCAG 2.1 AA conformance summary.

Built with D3plus

OEC.world | Data USA | DataSaudi | Data Africa | Puerto Rico Family Data Center | COTEC Spain | CDC AR&PSP | Healthy Communities NC | CNY Vitals Pro | DataMPE Brasil | Estonia Statistics

Contributing

See CONTRIBUTING.md for setup instructions, development workflow, and guidelines for submitting pull requests.

License

MIT