Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/n1crack/org-chart
Highly customizable d3 org chart. Integrations available for Angular, React, Vue
https://github.com/n1crack/org-chart
Last synced: about 1 month ago
JSON representation
Highly customizable d3 org chart. Integrations available for Angular, React, Vue
- Host: GitHub
- URL: https://github.com/n1crack/org-chart
- Owner: n1crack
- License: mit
- Fork: true (bumbeishvili/org-chart)
- Created: 2023-07-21T20:30:22.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-09-17T17:33:26.000Z (about 1 year ago)
- Last Synced: 2023-09-17T19:00:50.445Z (about 1 year ago)
- Language: HTML
- Homepage: https://stackblitz.com/edit/web-platform-o5t1ha
- Size: 232 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
[](https://github.com/vshymanskyy/StandWithUkraine/blob/main/docs/README.md)
# Highly customizable d3 based organization chart
[](https://npmjs.org/package/d3-org-chart)
[Medium article about this project](https://bumbeishvili.medium.com/introducing-a-new-org-chart-130368314f04)
Highly customizable org chart built with d3 v7.
## Features
Simple Data
Custom Content
Nested Data
Online Data
CSV Data
Styled Tree
Expand Node
Collapse Node
Add Node
Remove Node
Fit Screen
Change Layout
Center Node
Highlight Node
Fullscreen
Zoom in and out
Export
Expand & Collapse All
Multi Node Connections
Paging 
Active node centering
Interactive Node
Searching org chart 
## How to use
Just copy this code and paste at - https://realtimehtml.com/
```html
var chart;
d3
.csv(
"https://raw.githubusercontent.com/bumbeishvili/sample-data/main/org.csv"
)
.then((data) => {
chart = new d3.OrgChart().container(".chart-container").data(data).render();
});
```
### Installing
```
npm i d3-org-chart
```
```javascript
import { OrgChart } from 'd3-org-chart';
new OrgChart()
.container()
.data() // https://github.com/bumbeishvili/sample-data/blob/main/data-oracle.csv
.render();
```
In general, we encourage to look into the source code to understand how it works. The chart code is basically a single class. At the top of the class, we have a state object called `attrs` which stores the state of the org chart and each single property is overridable by the user.
For example, one of the property name inside `attrs` object is `duration`, which controls animation duration for chart, when expanding or collapsing nodes.
If we want to get the value, we can either do
```javascript
chart.getChartState().duration
```
or directly
```javascript
chart.duration()
```
`chart` in the above case is an instance of `OrgChart` class. We can get it using `new OrgChart()`
If we want to set property, we can pass argument to the same function and it will automatically set the value
```javascript
chart.duration(3000) // This will become very slow moving chart
```
You can see list of all properties , their description of what each property does in the actual source code.
https://github.com/bumbeishvili/org-chart/blob/b7e23474716a72b93e6ecd7b7fafccbcd1e621fa/src/d3-org-chart.js#L40
Be aware that they are chainable, so if we wanted to set multiple properties, we would do this
```javascript
const chart = new OrgChart()
.data(ourData)
.container(ourDomElementOrCssSelector)
.duration(ourDuration)
.render()
// We can keep chaining values in runtime
chart.data(updatedData).render()
```
Have you impressively customized an organizational chart and want to be featured on this page? Just email me at [email protected] and include screenshot of your org chart and it will be featured on this page (dimensions of image should be 500 X 500).
## Jump To Examples
| | |
| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| 
Default | 
Sky |
| 
Circles | 
Oval |
| 
Clean (Design by [Anton](https://dribbble.com/shots/15480691-Org-chart)) | 
Futuristic - Full Functionality |
| 
Prev version design |
#### Featured customizations:
Check out several libraries and frameworks integrations
- [Vue.js Integration](https://stackblitz.com/edit/d3-org-chart-vue-integration-su3d6r)
- [React integration](https://stackblitz.com/edit/d3-org-chart-react-integration-hooks)
- [Angular integration](https://stackblitz.com/edit/angular-ivy-gneris)
Custom components & algorithms I used
- [Curved edges - vertical](https://observablehq.com/@bumbeishvili/curved-edges-compacty-vertical)
- [Curved edges - horizontal](https://observablehq.com/@bumbeishvili/curved-edges-compact-horizontal)
- [Flextree Algorithm](https://github.com/Klortho/d3-flextree)
### Quick Docs
Check the sample data here - https://github.com/bumbeishvili/sample-data/blob/main/data-oracle.csv
For the full functionality of exposed methods check [Futuristic Example](https://stackblitz.com/edit/web-platform-o5t1ha) and button bound functions
For the high level overview of margins and content setting check the image bellow
## Notes & appreciations
I created this org-chart when I was hired by [TeamApps](https://github.com/teamapps-org).
Although this Org chart was specifically created for [teamapps java web application framework](https://github.com/teamapps-org/teamapps) , it's very flexible and can be used in any environment, where d3 and DOM is accessible.
Big thanks to [Matthias](https://github.com/Matthias-Bernstein) and [Yann](https://github.com/yamass), who assembled requirements for org-chart and had valuable pieces of advice afterwads.
Also, thanks all people who made generous [donations](https://ko-fi.com/bumbeishvili), it gives me motivation to further improve this org chart component.
Thanks [contractzen](https://www.contractzen.com/) for the significant contribution, which made implementation of some of the most important features (optimal layout, exporting ) possible.
## Author
[David B (twitter)](https://twitter.com/dbumbeishvili)
[David B (linkedin)](https://www.linkedin.com/in/bumbeishvili/)
I am available for freelance data visualization work. Please [contact me](https://davidb.dev/about) in case you'd like me to help you with my experience and expertise
You can also [book data viz related consultation session](https://www.fiverr.com/share/4XxG21) with me
