) // 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/5be7e0962e46013b3a95dd19f41f829c3c853d1f/src/d3-org-chart.js#L41
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 me@davidb.dev 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
