npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@dpuse/dpuse-tool-d3-visualiser

v1.0.112

Published

A TypeScript wrapper for D3, TanStack Charts, and Unovis that implements the Data Positioning chart-rendering interface, providing ERD (dagre), Sankey (d3-sankey), chord (Unovis), network (d3-force), tree (d3-hierarchy), and bar chart (TanStack Charts) re

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

terrelljmterrelljm

Keywords

Readme

DPUse D3 Visualiser Tool

Consider an eCharts visualiser along with existing Highcharts (comercial).

License: MIT DPUse version npm version CI

A TypeScript wrapper for D3, TanStack Charts, and Unovis that implements the Data Positioning chart-rendering interface, providing ERD (dagre), Sankey (d3-sankey), chord (Unovis), network (d3-force), tree (d3-hierarchy), and bar chart (TanStack Charts) renderers.

Report a Vulnerability · Open an Issue

About DPUse

DPUse (Data Positioning & Use) is an in-browser application that positions your data for use through three core activities: sourcing, contextualising, and publishing.

Sourcing uses a library of Connectors to establish Connections to applications, databases, file stores, and curated datasets; these connections are subsequently used to configure structured Data Views from the underlying sources.

Contextualising extracts chronological events from those Data Views and maps them into comprehensive Context Models. This gives the DPUse Engine the structural framework needed to generate deterministic transactions, facts, or observations.

Publishing uses a library of Presenters to render standard Presentations immediately using the contextualised data; additionally, Cookbooks of Recipes let you build Data Apps using your preferred tools.

In addition, DPUse provides Tools used by the application, and you can use them to construct connectors and presenters.

Introduction

...

Design Notes

  • All D3 submodules (d3-sankey, d3-selection, and their transitive d3-array/d3-shape dependencies) are bundled directly into this tool's build, the same way @dpuse/-visualiser bundles Highcharts. There is exactly one copy of each module per page load regardless of how many times this tool is dynamically imported, since the browser's module registry caches import() calls by resolved URL.
  • Rendering happens on the main thread because it writes directly into a real HTMLElement - the DPUse Engine's connector/context processing runs inside a dedicated Web Worker, but presentation-rendering tools (this one and Highcharts) are loaded the same way dpuse-presenter-default is, directly by the host app.
  • Node identity is carried by a direct text label on every node, not by colour alone, so the categorical palette is free to cycle past its 8 fixed slots for diagrams with more nodes than that.

A TypeScript wrapper for D3 that implements the Data Positioning chart-rendering interface, starting with a Sankey diagram renderer built on d3-sankey and d3-selection.

Usage

This package is available on npm. Install it with:

npm install @dpuse/dpuse-tool-d3-visualiser

To work on the source instead, clone this repository.

git clone https://github.com/dpuse/dpuse-tool-d3-visualiser.git
cd dpuse-tool-d3-visualiser
npm install

Requires Node.js 24 or later, npm 12 or later, and TypeScript 6.0.3 or later.

This repository is managed using the common set of actions provided by @dpuse/dpuse-development. See the scripts block in package.json for details.

There's no need to install this tool manually. Once released, it's uploaded to the Data Positioning Engine cloud and becomes instantly available to all new instances of the browser app. A notification about the new version is also sent to all existing browser apps.

Basic usage example with no error handling.

import type { D3Tool as D3ToolType, SankeyDiagramData } from '@dpuse/dpuse-tool-d3-visualiser';

async function loadD3Tool(version: string): Promise<D3ToolType> {
    if (d3Tool) return d3Tool;

    const URL = `https://engine-eu.dpuse.app/tools/d3_v${version}/dpuse-tool-d3.es.js`;
    const D3Tool = (await import(/* @vite-ignore */ URL)).D3Tool as new () => D3ToolType;
    return new D3Tool();
}

const d3Tool = await loadD3Tool('n.n.nnn');

const data: SankeyDiagramData = {
    nodes: [
        { id: 'sourcing', name: 'Sourcing' },
        { id: 'contextualising', name: 'Contextualising' },
        { id: 'publishing', name: 'Publishing' }
    ],
    links: [
        { source: 'sourcing', target: 'contextualising', value: 8 },
        { source: 'contextualising', target: 'publishing', value: 5 }
    ]
};

const view = d3Tool.renderSankeyDiagram(data, renderTo);
// Call view.resize() after the container's size changes to redraw the layout.

Dependency Licenses

License data is updated each time npm run document is run, using license-checker. The following table lists every package whose code, styles or assets are included in this project's build, as recorded by the build itself. Modules loaded at run time are not included; each documents its own. These dependencies have been checked and confirmed to use Apache-2.0, BSD-3-Clause, ISC, or MIT, all of which allow commercial use. All are used unmodified, so any licence conditions that apply only to modified versions are not triggered. Developers cloning this repository should independently verify development dependencies.

| Dependency | Version | License(s) | Document | | :-------------------------------------------------------------------- | :-----: | :----------- | :---------------------------------------------------------------------- | | @dagrejs/dagre | 3.1.1 | MIT | LICENSE | | @emotion/cache | 11.14.0 | MIT | LICENSE | | @emotion/css | 11.13.5 | MIT | LICENSE | | @emotion/hash | 0.9.2 | MIT | LICENSE | | @emotion/memoize | 0.9.0 | MIT | LICENSE | | @emotion/serialize | 1.3.3 | MIT | LICENSE | | @emotion/sheet | 1.4.0 | MIT | LICENSE | | @emotion/unitless | 0.10.0 | MIT | LICENSE | | @emotion/utils | 1.4.2 | MIT | LICENSE | | @juggle/resize-observer | 3.4.0 | Apache-2.0 | LICENSE | | @tanstack/charts | 1.0.0 | MIT | LICENSE | | @unovis/ts | 1.7.1 | Apache-2.0 | LICENSE | | d3-array | 3.2.4 | ISC | LICENSE | | d3-chord | 3.0.1 | ISC | LICENSE | | d3-color | 3.1.0 | ISC | LICENSE | | d3-dispatch | 3.0.1 | ISC | LICENSE | | d3-drag | 3.0.0 | ISC | LICENSE | | d3-ease | 3.0.1 | BSD-3-Clause | LICENSE | | d3-force | 3.0.0 | ISC | LICENSE | | d3-format | 3.1.2 | ISC | LICENSE | | d3-hierarchy | 3.1.2 | ISC | LICENSE | | d3-interpolate | 3.0.1 | ISC | LICENSE | | d3-interpolate-path | 2.3.0 | BSD-3-Clause | LICENSE | | d3-path | 3.1.0 | ISC | LICENSE | | d3-quadtree | 3.0.1 | ISC | LICENSE | | d3-sankey | 0.12.3 | BSD-3-Clause | LICENSE | | d3-scale | 4.0.2 | ISC | LICENSE | | d3-selection | 3.0.0 | ISC | LICENSE | | d3-shape | 3.2.0 | ISC | LICENSE | | d3-timer | 3.0.1 | ISC | LICENSE | | d3-transition | 3.0.1 | ISC | LICENSE | | d3-zoom | 3.0.0 | ISC | LICENSE | | internmap | 2.0.3 | ISC | LICENSE | | stylis | 4.2.0 | MIT | LICENSE | | throttle-debounce | 5.0.2 | MIT | LICENSE |

Dependency Tree

The dependency tree below shows how each package in the table above is reached — direct and transitive — along with its installed version, release date, and update status. A package that does not ship itself, such as one whose parts are bundled separately, is left out and what ships beneath it is shown in its place. Packages flagged ❗ have a newer version available; ⚠️ indicates a package that hasn't been updated in the last 6 months or longer. Neither flag necessarily indicates a problem: we let new releases stabilise before upgrading, and some packages are mature and stable (have limited or no dependencies), so they require no active development.

Bundle Analysis

This report is updated with each release, from the bundle the release builds, using Sonda, which analyses final source maps to reveal the actual effects of tree-shaking and minification rather than relying on pre-build estimates.

Note: Sonda's Vite reports currently exclude CSS files, since Vite does not generate source maps for CSS.

| Chunk/Module/File | Composition | | :------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------- | | dist/tanStackCharts-LPqRQGD9.js | 127.9 kB · gzip 37.1 kB · 29.1% of the build | |     @tanstack/charts → dist/scene.js + 41 more | ██████████████████░░ 87.8% · 112.2 kB | |     d3-shape → src/stack.js + 8 more | ░░░░░░░░░░░░░░░░░░░░ 1.9% · 2.5 kB | |     d3-scale → src/band.js | ░░░░░░░░░░░░░░░░░░░░ 1.0% · 1.3 kB | |     src → tanStackCharts.ts | ░░░░░░░░░░░░░░░░░░░░ 0.5% · 717 B | |     d3-array → src/range.js | ░░░░░░░░░░░░░░░░░░░░ 0.2% · 223 B | |     (bundler output, whitespace & JSON) | ██░░░░░░░░░░░░░░░░░░ 8.6% · 11.0 kB | | dist/chordDiagram-BG0jW2g9.js | 117.6 kB · gzip 32.4 kB · 26.8% of the build | |     @unovis/ts → components/chord-diagram/index.js + 34 more | ██████░░░░░░░░░░░░░░ 30.8% · 36.2 kB | |     d3-shape → src/arc.js + 25 more | █████░░░░░░░░░░░░░░░ 23.1% · 27.2 kB | |     @juggle/resize-observer → …s/calculateBoxSize.js + 22 more | ██░░░░░░░░░░░░░░░░░░ 8.1% · 9.5 kB | |     d3-interpolate-path → …d/d3-interpolate-path.mjs | █░░░░░░░░░░░░░░░░░░░ 6.1% · 7.2 kB | |     @emotion/cache → …t/emotion-cache.browser.esm.js | █░░░░░░░░░░░░░░░░░░░ 4.5% · 5.3 kB | |     stylis → src/Parser.js + 5 more | █░░░░░░░░░░░░░░░░░░░ 4.4% · 5.2 kB | |     d3-chord → src/ribbon.js + 3 more | ░░░░░░░░░░░░░░░░░░░░ 2.1% · 2.4 kB | |     @emotion/serialize → …t/emotion-serialize.esm.js | ░░░░░░░░░░░░░░░░░░░░ 1.9% · 2.3 kB | |     @emotion/css → …otion-css-create-instance.esm.js + 1 more | ░░░░░░░░░░░░░░░░░░░░ 1.3% · 1.5 kB | |     @emotion/sheet → dist/emotion-sheet.esm.js | ░░░░░░░░░░░░░░░░░░░░ 1.2% · 1.4 kB | |     d3-hierarchy → src/partition.js + 2 more | ░░░░░░░░░░░░░░░░░░░░ 0.8% · 1018 B | |     @emotion/unitless → dist/emotion-unitless.esm.js | ░░░░░░░░░░░░░░░░░░░░ 0.6% · 767 B | |     @emotion/hash → dist/emotion-hash.esm.js | ░░░░░░░░░░░░░░░░░░░░ 0.6% · 720 B | |     throttle-debounce → esm/index.js | ░░░░░░░░░░░░░░░░░░░░ 0.6% · 688 B | |     d3-scale → src/pow.js | ░░░░░░░░░░░░░░░░░░░░ 0.5% · 552 B | |     src → chordDiagram.ts | ░░░░░░░░░░░░░░░░░░░░ 0.4% · 494 B | |     d3-array → src/group.js + 1 more | ░░░░░░░░░░░░░░░░░░░░ 0.4% · 487 B | |     @emotion/utils → …t/emotion-utils.browser.esm.js | ░░░░░░░░░░░░░░░░░░░░ 0.4% · 481 B | |     @emotion/memoize → dist/emotion-memoize.esm.js | ░░░░░░░░░░░░░░░░░░░░ 0.1% · 119 B | |     (bundler output, whitespace & JSON) | ██░░░░░░░░░░░░░░░░░░ 12.0% · 14.2 kB | | dist/erdDiagram-CHPY-zaP.js | 63.0 kB · gzip 18.2 kB · 14.3% of the build | |     @dagrejs/dagre → dist/dagre.esm.js | ██████████████████░░ 88.3% · 55.6 kB | |     src → erdDiagram.ts | █░░░░░░░░░░░░░░░░░░░ 5.4% · 3.4 kB | |     (bundler output, whitespace & JSON) | █░░░░░░░░░░░░░░░░░░░ 6.3% · 4.0 kB | | dist/networkDiagram-XI0c9kJR.js | 35.8 kB · gzip 10.4 kB · 8.2% of the build | |     d3-zoom → src/zoom.js + 4 more | ██████░░░░░░░░░░░░░░ 30.0% · 10.7 kB | |     d3-force → src/simulation.js + 6 more | ███░░░░░░░░░░░░░░░░░ 17.4% · 6.2 kB | |     d3-quadtree → src/add.js + 13 more | ███░░░░░░░░░░░░░░░░░ 17.3% · 6.2 kB | |     d3-drag → src/drag.js + 4 more | ██░░░░░░░░░░░░░░░░░░ 12.0% · 4.3 kB | |     src → networkDiagram.ts | ██░░░░░░░░░░░░░░░░░░ 8.3% · 3.0 kB | |     d3-interpolate → src/zoom.js | █░░░░░░░░░░░░░░░░░░░ 2.7% · 1004 B | |     d3-selection → src/pointer.js + 1 more | ░░░░░░░░░░░░░░░░░░░░ 1.4% · 514 B | |     (bundler output, whitespace & JSON) | ██░░░░░░░░░░░░░░░░░░ 10.8% · 3.9 kB | | dist/src-Bo8my4B8.js | 21.8 kB · gzip 6.2 kB · 5.0% of the build | |     d3-transition → src/transition/schedule.js + 26 more | ████████████░░░░░░░░ 58.9% · 12.8 kB | |     d3-interpolate → src/transform/index.js + 2 more | ██░░░░░░░░░░░░░░░░░░ 9.9% · 2.2 kB | |     d3-dispatch → src/dispatch.js | ██░░░░░░░░░░░░░░░░░░ 8.3% · 1.8 kB | |     d3-timer → src/timer.js + 1 more | ██░░░░░░░░░░░░░░░░░░ 7.6% · 1.7 kB | |     d3-ease → src/cubic.js | ░░░░░░░░░░░░░░░░░░░░ 0.4% · 82 B | |     (bundler output, whitespace & JSON) | ███░░░░░░░░░░░░░░░░░ 15.0% · 3.3 kB | | dist/select-Bs4oiNEZ.js | 17.8 kB · gzip 4.4 kB · 4.1% of the build | |     d3-selection → src/selection/data.js + 45 more | ████████████████░░░░ 79.5% · 14.2 kB | |     (bundler output, whitespace & JSON) | ████░░░░░░░░░░░░░░░░ 20.5% · 3.7 kB | | dist/linear-DytAYqu2.js | 17.0 kB · gzip 5.4 kB · 3.9% of the build | |     d3-format → src/locale.js + 14 more | ███████░░░░░░░░░░░░░ 35.3% · 6.0 kB | |     d3-scale → src/continuous.js + 6 more | █████░░░░░░░░░░░░░░░ 22.6% · 3.8 kB | |     d3-array → src/ticks.js + 5 more | ███░░░░░░░░░░░░░░░░░ 12.5% · 2.1 kB | |     d3-interpolate → src/value.js + 5 more | ██░░░░░░░░░░░░░░░░░░ 7.8% · 1.3 kB | |     internmap → src/index.js | █░░░░░░░░░░░░░░░░░░░ 4.4% · 768 B | |     (bundler output, whitespace & JSON) | ███░░░░░░░░░░░░░░░░░ 17.5% · 3.0 kB | | dist/sankeyDiagram-w2TGSqb7.js | 10.6 kB · gzip 3.3 kB · 2.4% of the build | |     d3-sankey → src/sankey.js + 3 more | ███████████░░░░░░░░░ 57.4% · 6.1 kB | |     src → sankeyDiagram.ts | ██████░░░░░░░░░░░░░░ 28.1% · 3.0 kB | |     d3-array → src/min.js + 1 more | █░░░░░░░░░░░░░░░░░░░ 3.7% · 406 B | |     (bundler output, whitespace & JSON) | ██░░░░░░░░░░░░░░░░░░ 10.8% · 1.1 kB | | dist/string-iJh48M7Y.js | 10.5 kB · gzip 3.9 kB · 2.4% of the build | |     d3-color → src/color.js + 1 more | ████████████████░░░░ 78.4% · 8.3 kB | |     d3-interpolate → src/string.js + 4 more | ███░░░░░░░░░░░░░░░░░ 14.2% · 1.5 kB | |     (bundler output, whitespace & JSON) | █░░░░░░░░░░░░░░░░░░░ 7.4% · 800 B | | dist/treeDiagram-C798R8hL.js | 4.9 kB · gzip 2.0 kB · 1.1% of the build | |     d3-hierarchy → src/tree.js | ██████████░░░░░░░░░░ 51.5% · 2.5 kB | |     src → treeDiagram.ts | ████████░░░░░░░░░░░░ 39.4% · 1.9 kB | |     (bundler output, whitespace & JSON) | ██░░░░░░░░░░░░░░░░░░ 9.1% · 455 B | | dist/hierarchy-CDFAetye.js | 4.0 kB · gzip 1.2 kB · 0.9% of the build | |     d3-hierarchy → src/hierarchy/index.js + 13 more | ██████████████░░░░░░ 71.4% · 2.8 kB | |     (bundler output, whitespace & JSON) | ██████░░░░░░░░░░░░░░ 28.6% · 1.1 kB | | dist/point-DSPrfIZi.js | 3.1 kB · gzip 1.2 kB · 0.7% of the build | |     d3-path → src/path.js | ████████████████░░░░ 80.0% · 2.5 kB | |     d3-shape → src/path.js + 1 more | ██░░░░░░░░░░░░░░░░░░ 9.4% · 301 B | |     (bundler output, whitespace & JSON) | ██░░░░░░░░░░░░░░░░░░ 10.6% · 341 B | | dist/link-BfoIl3p5.js | 1.9 kB · gzip 749 B · 0.4% of the build | |     d3-shape → src/link.js + 1 more | █████████████████░░░ 84.1% · 1.6 kB | |     (bundler output, whitespace & JSON) | ███░░░░░░░░░░░░░░░░░ 15.9% · 317 B | | dist/dpuse-tool-d3-visualiser.es.js | 1.6 kB · gzip 448 B · 0.4% of the build | |     src → index.ts | █████████████████░░░ 86.9% · 1.4 kB | |     (bundler output, whitespace & JSON) | ███░░░░░░░░░░░░░░░░░ 13.1% · 211 B | | dist/palette-Ca7C6aNE.js | 1.2 kB · gzip 581 B · 0.3% of the build | |     src → palette.ts | ████████████░░░░░░░░ 62.2% · 774 B | |     d3-array → src/max.js | ████░░░░░░░░░░░░░░░░ 19.4% · 241 B | |     (bundler output, whitespace & JSON) | ████░░░░░░░░░░░░░░░░ 18.5% · 230 B | | dist/array-Cv4-2llb.js | 325 B · gzip 210 B · 0.1% of the build | |     d3-shape → src/array.js + 1 more | ██████████░░░░░░░░░░ 51.1% · 166 B | |     (bundler output, whitespace & JSON) | ██████████░░░░░░░░░░ 48.9% · 159 B |

Bars show each row's share of its output file.

  • n more = the row also holds n more files from the same package or folder, each no larger than the one named. A package can appear under several output files, each holding different files, never the same file twice.

(bundler output, whitespace & JSON) = bytes Sonda can't trace to a source file: whitespace (indentation and line breaks), code the bundler generates (region comments, the combined import/export lines, its small runtime helper and wrappers), and imported JSON such as config.json, which the bundler doesn't map. The JSON and the generated code are real bytes that ship; the whitespace mostly disappears once compressed.

Quality & Security

This section is updated each time npm run document is run. Settings come from the repository's workflow files and GitHub. Test coverage and the Fallow score are measured at the same time.

Testing

| Check | Status | What it does | | :------------------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Unit tests | ✅ On | Vitest runs the unit tests. Part of the CI workflow on every push and pull request to main. | | Property-based tests | ❌ Off | fast-check runs many random inputs per test to find edge cases, alongside the unit tests. |

Code Quality

| Check | Status | What it does | | :------------ | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Code analysis | ✅ On | Quality Gate Status SonarCloud checks every push for bugs, code smells and vulnerabilities. | | Linting | ✅ On | ESLint checks the code for errors and style problems. Part of the CI workflow on every push and pull request to main. |

Security Analysis

| Check | Status | What it does | | :-------------- | :----- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Push protection | ✅ On | GitHub push protection blocks pushes that contain credentials. | | Static analysis | ✅ On | CodeQL CodeQL scans GitHub Actions and JavaScript/TypeScript for security vulnerabilities, using the extended security queries, on every push and pull request to main and weekly. | | Secret scanning | ✅ On | GitHub secret scanning detects credentials, such as API keys and tokens, committed to the repository. |

Dependencies

| Check | Status | What it does | | :------------------ | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Vulnerability audit | ✅ On | npm audit fails when a shipped dependency has any known vulnerability, or a development dependency has a high or critical one. Part of the CI workflow on every push and pull request to main. | | Supply chain risk | ✅ On | Socket flags malicious packages, typosquatting and suspicious behaviour that may not yet have a CVE. | | Security alerts | ✅ On | Dependabot alerts when a dependency has a known vulnerability, using the GitHub Advisory Database. | | Security updates | ❌ Off | Dependabot opens pull requests that update vulnerable dependencies. These are handled manually. | | Version updates | ❌ Off | Dependabot opens pull requests for new dependency versions. These are handled manually. |

OpenSSF 🚧

OpenSSF Scorecard

This project is working towards the OpenSSF Best Practices Passing badge, a self-certification covering security policy, vulnerability reporting, build processes, code quality, and more. Currently the OpenSSF Scorecard provides an independent automated assessment of the project's security practices and is an ongoing area of improvement.

Reporting Vulnerabilities

Please do not open public GitHub issues for security vulnerabilities. Use GitHub private vulnerability reporting instead. See SECURITY.md for the full disclosure policy, contact details, and expected response times.

Contributing

This repository is maintained solely by its owner and does not, at present, accept external contributions into the canonical repo. Its source is published openly under the MIT License — every DPUse project is fully open source except DPUse Engine, which remains closed and proprietary.

For security vulnerabilities, see Reporting Vulnerabilities. For bugs, inconsistencies, or other feedback, open a GitHub issue — feedback is read, but responses and fixes are at the maintainer's discretion.

License

This project is licensed under the MIT License, permitting free use, modification, and distribution.

MIT © 2026 Jonathan Terrell