D3 v5 organization chart

Highly customizable org chart built with d3 v5.

Check out examples

• Observable example (Most Updated)
• Jsfiddle example
• Codepen example

Check out several libraries and frameworks integrations

• Vue.js Integration
• React integration
• Angular integration

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.

Author

David B (twitter)
David B (linkedin)

I am available for freelance data visualization work. Please contact me in case you'd like me to help you with my experience and expertise