# d3-org-chart: a d3 organization chart you can edit, not just draw > d3-org-chart is a d3 v7 based organization chart published to npm as d3-org-chart, with integrations for Angular, React and Vue, and with a working demo of every feature on StackBlitz. It gives you editable nodes, several data sources and a lot of layout switches, and it is maintained through npm rather than through GitHub releases. **bumbeishvili/org-chart** — Highly customizable org chart. Integrations available for Angular, React, Vue - Repository: https://github.com/bumbeishvili/org-chart - Website: https://stackblitz.com/edit/web-platform-o5t1ha - Stars: 1,217 · Forks: 381 - Language: HTML - License: MIT - Published: 2026-10-19 · Updated: 2026-10-19 · Language: en - Canonical page: https://hysenlabs.com/projects/bumbeishvili-org-chart ## A company chart that behaves like an editor Most organization charts are pictures of a hierarchy. d3-org-chart is a d3 v7 based chart that behaves like a small editor, and that is the difference the project is built around. The feature list in the README is a list of operations rather than a list of layouts. Nodes expand and collapse, they can be added and removed, the chart can be fitted to the screen, a layout can be changed, a node can be centred or highlighted, the view can go fullscreen, the whole tree can be zoomed, the result can be exported, everything can be expanded or collapsed at once, connections can run between multiple nodes, the chart can be paged, there is a horizontal view, active node centring, an interactive node, and a search across the chart. That set implies something important about the intended use. An org chart on a company intranet is usually read, but this one is edited, and the editing happens in the browser with no server call mentioned anywhere in the documentation. The project is MIT licensed, the repository is not archived, and the last push was on 2026-07-08. There are no GitHub releases, so the npm package is the distribution channel. ## The package ships a UMD bundle and the source side by side The npm package is named d3-org-chart and the version in the repository is 3.1.1. The package metadata describes how it is meant to be consumed, and there are three entry points, which is a deliberate accommodation for different bundlers and script tags. ```json "main": "build/d3-org-chart.min.js", "jsdelivr": "build/d3-org-chart.min.js", "unpkg": "build/d3-org-chart.min.js" ``` Those three fields point at the same minified bundle, so a plain script tag, a CDN reference and a legacy require all resolve to the same file. The exports map adds the modern path, where the default entry is the unbundled source in src/, and the umd condition keeps the bundle available. The module field points at index.js. The reason for shipping both is visible in the build pipeline. The bundle is produced by rollup from a list of d3 submodules, so a project that already loads d3 does not get a second copy of the library, while a project that loads nothing gets a self-contained file from a CDN. The source entry is the one to use if you are bundling with a modern tool, and the minified file is the one to drop into a page that has no build step at all. ## Four ways to get data in, from a literal to a URL The demos in the README are organised by data source, and that is the fastest way to understand what the chart expects. There is a simple data example, which is the starting point for learning the API. There is a nested data example, which is the shape a real hierarchy takes. There is an online JSON data example, where the chart is fed from a URL. And there is a CSV data example. The distinction matters because a hierarchy has to be expressed as something the layout can walk, and a company directory is often available as a flat list of people with a manager field. The d3 layout code the project builds on handles the conversion, but you still have to decide which of the four shapes your existing data already has, and whether a flat list needs reshaping on your side before it reaches the chart. The CSV route is the one that catches people out. It is convenient for a spreadsheet of employees, but it is also the route where a missing manager reference or an inconsistent name quietly produces a chart that is missing branches, and the README does not document validation behaviour for that case. ## Custom content and the styled tree are the real customization Two of the demos describe the level at which this library differs from a chart you can only restyle with CSS. The custom content demo means the contents of a node are yours to define, not a fixed card the library renders. The styled tree demo covers the appearance of the tree itself. Together they say that the chart is a container for your own content with d3 drawing the connectors, which is the arrangement most teams want: a photo, a title, a status badge and a link inside a node, with the hierarchy still readable. The remaining operations are what make a chart usable in an application. Paging matters when a company is large enough that one screen cannot hold it. Fit screen and zoom keep the tree legible on a laptop and on a wall display. Centre node and active node centring are what you need when a user clicks a person and expects the view to follow. Search across the chart is the operation that turns a static diagram into a navigation aid for a directory. None of these are exotic, and the project keeps a live StackBlitz demo for each one, linked from the README, which is a faster reference than any API description. ## Angular, React and Vue are all supported The repository description states that integrations are available for Angular, React and Vue, and the primary language of the repository is listed as HTML, which matches a project whose deliverable is a browser component rather than a server library. The practical point is that d3 manipulates the DOM directly, which is exactly the thing that makes a d3 chart awkward inside a modern component framework. A framework owns the DOM and re-renders it, and a d3 chart wants to hold on to elements it has created. Integrations exist to bridge that gap, and the practical question for an adopter is how much of the configuration the integration exposes, because the feature set here is large and any option the wrapper does not pass through is an option you cannot change. There is also a demo for the library as a standalone page, and a Medium article introducing a v3 version of the chart, which is useful background for anyone arriving from an older release and wondering what changed. The d3 v7 requirement is the other thing to check early. The chart is built on d3 v7, and a project still on d3 v5 or v6 is looking at a dependency problem before it is looking at an org chart. ## The build bundles named d3 submodules, then tape runs the tests The package scripts show the whole pipeline, and the interesting part is the rollup invocation, which lists the d3 submodules as externals mapped to the d3 global instead of bundling them. ```bash rollup -g d3-selection:d3,d3-array:d3,d3-hierarchy:d3,d3-zoom:d3,d3-flextree:d3,d3-shape:d3,d3-group:d3 -f umd -n d3 -o build/d3-org-chart.js -- index.js ``` Those are the modules the chart actually depends on: selection for the DOM work, hierarchy and flextree for the layout, zoom for the pan and zoom, shape and group for the connectors, and array for the data utilities. Mapping them to d3 means the bundle expects a d3 global that carries them, and it is why the package can be dropped into a page that already loads d3 without duplicating it. Tests run with tape over the test directory, and the publish step minifies the bundle with uglifyjs and then zips the licence, the readme and both bundles into a release archive. A nodemon based start script is there for local development, and the repository keeps a tree.html page alongside the misc/ directory for inspection. One wrinkle in the metadata is worth knowing before you file anything. The bugs, homepage and repository fields still point at the older d3-organization-chart repository name, so an issue report may land somewhere unexpected. ## Versioning happens on npm, not in GitHub releases The repository publishes no GitHub releases at all, which changes how you should think about versions and about the health of the project. The version in the repository is 3.1.1, and the npm package d3-org-chart is the artefact people actually install. So there is no tag to point at and no changelog on the releases page to read. The upstream signals are the npm version, the Medium article describing the v3 release, and the commit history, with the last push on 2026-07-08. That is a workable arrangement for a library of this kind, where a breaking change arrives as a new major on npm and the repository keeps moving. It is a weaker arrangement for anyone who wants a stable, dated reference point, and it means pinning by version in your lockfile matters more than usual. The licence is MIT, which is the permissive default and removes any question about using the chart in a commercial product. The stackblitz link in the repository is a live demo of the whole feature set, and it is the fastest way to judge whether the interaction model fits your product before you install anything. ## Conclusion d3-org-chart fits a team that needs an org chart as a live, editable component rather than a picture, that already works in d3 v7, and that wants its own content rendered inside each node instead of the default card. It does not fit a content pipeline that wants a static image produced on a server, since the value here is the interaction and the DOM you can bind to, and it does not fit a project that expects tagged releases to pin a version. Verify three things before you adopt it: that the version on npm matches the source you are reading, since the repository publishes no GitHub releases, that the d3 modules you already load are the ones the bundle expects, and that the package metadata still points at an older repository name, which is the kind of thing that sends issue reports to the wrong place. ## FAQ ### What is d3-org-chart and how do I add it to a project? It is an MIT licensed organization chart built with d3 v7, published to npm under the name d3-org-chart at version 3.1.1 in the repository. The package offers a minified UMD bundle through main, jsdelivr and unpkg, and the unbundled source in src/ as the default export for modern bundlers. ### What data formats does d3-org-chart accept? The project demonstrates four inputs: a simple data set, nested data, online JSON loaded from a URL, and CSV. The README does not document how invalid manager references in a flat or CSV data set are reported, which is worth checking against your own data before you rely on it. ### Does d3-org-chart work with React, Vue and Angular? Yes. The repository description lists integrations available for Angular, React and Vue, and the demos in the README cover the library running as a standalone page as well. ### How do I build d3-org-chart from the repository? The package scripts run rollup to bundle a named set of d3 submodules, including d3-hierarchy, d3-flextree, d3-zoom, d3-shape and d3-group, into a UMD build, and the tests run with tape over the test directory. Publishing minifies the bundle with uglifyjs and zips the licence, the readme and the bundles. ### Does the project publish tagged releases? The repository has no GitHub releases. Versions are distributed through the npm package d3-org-chart, currently 3.1.1 in the repository, and the last push to the repository was on 2026-07-08. Note that the package metadata still points at the older d3-organization-chart repository name. ## Sources - [bumbeishvili/org-chart on GitHub](https://github.com/bumbeishvili/org-chart) - [Issues](https://github.com/bumbeishvili/org-chart/issues) - [License: MIT](https://github.com/bumbeishvili/org-chart/blob/master/LICENSE) - [Project website](https://stackblitz.com/edit/web-platform-o5t1ha) - [README](https://github.com/bumbeishvili/org-chart/blob/master/README.md) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/bumbeishvili-org-chart