Aiz-d3-org-chart NPM

D3 v5 organization chart

Highly customizable org chart built with d3 v5.

Check out examples

Check out several libraries and frameworks integrations

Custom components & algorithms I used

Curved edges - observablehq playground

Installing

npm i d3-org-chart

Docs

Weak Wiki

Usage

const TreeChart = require ('https://bundle.run/d3-org-chart@1.0.4');


new TreeChart()
   .container(<myDOMElement>)
   .data(<myData>)
   .svgWidth(700)
   .initialZoom(0.4)
   .onNodeClick(d=> console.log(d+' node clicked'))
   .render()

Notes & appreciations

I created this org-chart when I was hired by TeamApps.

Although this Org chart was specifically created for teamapps java web application framework , it's very flexible and can be used in any environment, where d3 and DOM is accessible.

Big thanks to Matthias and Yann, who assembled requirements for org-chart and had valuable pieces of advice afterwads.