Skip to content

crakter/d3-organization-chart

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

D3 v5 organization chart

NPM Version

Org chart built with d3 v5

Examples

Observable example (Most Updated)
Jsfiddle example
Codepen example

Installing

yarn add d3-org-chart

Docs

Weak Wiki

Usage

import { TreeChart } from 'd3-org-chart'


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

See usage example - https://observablehq.com/@bumbeishvili/tree-chart-npm-demo

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 envornment, 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.

Authors

David B (twitter)

Donate

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)

Buy Me a Coffee at ko-fi.com

About

Org Chart using d3.js

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%