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
Custom components & algorithms I used
- Curved edges - observablehq playground
npm i d3-org-chart
const TreeChart = require ('https://bundle.run/[email protected]');
new TreeChart()
.container(<myDOMElement>)
.data(<myData>)
.svgWidth(700)
.initialZoom(0.4)
.onNodeClick(d=> console.log(d+' node clicked'))
.render()
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.
David B (twitter)
David B (linkedin)
If this project helped you please consider donation. It allows me to find more time from my already busy schedule and put more features in graph (while still maintaining its flexibility)
