{"_id":"y-d3-org-chart","_rev":"1-9e61da6c04121d870106618b98c0f881","name":"y-d3-org-chart","dist-tags":{"latest":"2.6.0"},"versions":{"2.6.0":{"name":"y-d3-org-chart","version":"2.6.0","module":"index","description":"Highly customizable org chart, created with d3","keywords":["d3","d3-module","d3-org-chart","org-chart","hierarchy","employee"],"license":"BSD-3-Clause","main":"build/d3-org-chart.min.js","jsdelivr":"build/d3-org-chart.min.js","unpkg":"build/d3-org-chart.min.js","exports":{"umd":"./build/d3-org-chart.min.js","default":"./src/d3-org-chart.js"},"jsnext:main":"index","bugs":{"url":"https://github.com/bumbeishvili/d3-organization-chart/issues"},"homepage":"https://github.com/bumbeishvili/d3-organization-chart#readme","repository":{"type":"git","url":"git+https://github.com/bumbeishvili/d3-organization-chart.git"},"scripts":{"start":"nodemon ","_pretest":"rm -rf build && mkdir build && rollup -c --banner \"$(preamble)\"","_test":"tape 'test/**/*-test.js'","_prepublish":"npm run test && uglifyjs build/d3-org-chart.js -c -m -o build/d3-org-chart.min.js","_postpublish":"zip -j build/d3-org-chart.zip -- LICENSE README.md build/d3-org-chart.js build/d3-org-chart.min.js","pretest":"rm -rf build && mkdir build && rollup -g d3-selection:d3,d3-array:d3,d3-hierarchy:d3,d3-zoom:d3,d3-flextree:d3,d3-shape:d3,d3-group:d3 -f umd -n d3 -o build/d3-org-chart.js -- index.js","test":"tape 'test/**/*-test.js'","prepublish":"npm run test && uglifyjs build/d3-org-chart.js -c -m -o build/d3-org-chart.min.js","postpublish":"zip -j build/d3-org-chart.zip -- LICENSE README.md build/d3-org-chart.js build/d3-org-chart.min.js"},"devDependencies":{"@babel/core":"^7.7.7","@babel/preset-env":"^7.7.7","babel":"^6.23.0","package-preamble":"0.1","rollup":"0.27","tape":"4","uglify-js":"3"},"dependencies":{"d3-selection":"3","d3-array":"3","d3-hierarchy":"3","d3-zoom":"3","d3-shape":"3","d3-flextree":"2.1.2"},"gitHead":"5fc089104944a60ad0df6a80762bd12f396611a7","_id":"y-d3-org-chart@2.6.0","_nodeVersion":"12.16.3","_npmVersion":"8.1.4","dist":{"integrity":"sha512-VddVM70voyP4cb/CrOEt5xlg2tv+Pgdpdubj2gyDhXeYdpkFTeRdGgRmhx8UFvsQlJJkLW/3AdoB4hASFaeYsQ==","shasum":"46b7077cc990ecea4754e9370151061ee5fa0905","tarball":"https://registry.npmjs.org/y-d3-org-chart/-/y-d3-org-chart-2.6.0.tgz","fileCount":15,"unpackedSize":449412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2AvqCRA9TVsSAnZWagAAGV0P/iKKT0RqDQL3tu9EJreL\nRGaXFBXZU/4vxprWD6F9h062JrNgE7kjTq5KaiyvLU4yJXxpXtNlpHFtQOEB\nrNqEFCxcUPDHNmGXGbWeRJoZT/kH9Me1niik17JnLGptyKXLWQkXoViSRL9s\nM8On82iJXJOHjhQMua7emki6qvMLJ2Yy+hcq+Gpx8T7Dc7wFAFxbOwN0KZYm\n+SsaDtNnWqIzJl7rMV4F0HfOCB+yajnVcKG7NiorXBkQeLSZO/8AS5FPr+gz\nNZ6Gmx4yv6Wy0R8S9NqKQmKw1PkLKHXNCX1cMJboOTiaIdCMKnZnFo8VIjKP\nHyRT5SjsYt1ER3qUjUHaqDUeZbt5BoKBtC1pYwHWuAP0X3Bdx9uzYYXttg+Z\nPEo016EVSqMHzlG+VtT9ip6e5VnDYHhBXCTaya9QxQSZYyJfPBmAlAzOp3BK\nWDvjjaT2bE4fQdEaY0QhcYGvYKeCnjQ0LzBnS357gBG9RjGiEs1WApIJw/SJ\n0bVZWdjnAUSrB+erOA74Rox4tYyMWRIV2dDWpdKxPRC5wPpzwjv1sGjfqyb9\nbbrxR7QRo0Ai/r2bmoGzlOX3slC+CfMVmEw9ri7EW9+OAxSKnJzw9XABMUqs\nWT3vhxnY2UfiErDjQWhWc5bQVb3Vh1/rblgPYQR3nq6op7/1O/QFRlekPoSc\nAZxt\r\n=Titd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH1j2vy+cEWT2lIqjTT7/HIvnNQqBRRItKbvsQAszAzFAiBsIssakC5KPivJ30reB/wG6dCPavzFVpgH4mkXSIToTg=="}]},"_npmUser":{"name":"kay_yong","email":"1394665842@qq.com"},"directories":{},"maintainers":[{"name":"kay_yong","email":"1394665842@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/y-d3-org-chart_2.6.0_1641548777852_0.2951337094121984"},"_hasShrinkwrap":false}},"time":{"created":"2022-01-07T09:46:17.850Z","2.6.0":"2022-01-07T09:46:18.016Z","modified":"2022-05-25T02:48:17.818Z"},"maintainers":[{"name":"kay_yong","email":"1394665842@qq.com"}],"description":"Highly customizable org chart, created with d3","homepage":"https://github.com/bumbeishvili/d3-organization-chart#readme","keywords":["d3","d3-module","d3-org-chart","org-chart","hierarchy","employee"],"repository":{"type":"git","url":"git+https://github.com/bumbeishvili/d3-organization-chart.git"},"bugs":{"url":"https://github.com/bumbeishvili/d3-organization-chart/issues"},"license":"BSD-3-Clause","readme":"# Highly customizable d3 based organization chart\r\n\r\n\"NPM\r\n[![](https://img.shields.io/npm/dm/d3-org-chart)](https://npmjs.org/package/d3-org-chart)\r\n\r\n

\r\n \r\n \r\n

\r\n\r\n\r\n\r\n[Medium article about this project](https://bumbeishvili.medium.com/introducing-a-new-org-chart-130368314f04)\r\n\r\n\r\n\r\n\r\nHighly customizable org chart built with d3 v7.\r\n\r\nHave you impressivelly 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).\r\n\r\n\r\n## Jump To Examples\r\n\r\n\r\n\r\n| | | \r\n|:-------------------------:|:-------------------------:|\r\n|
Default
|
Sky
\r\n |
Circles
|
Oval
| \r\n |
Clean (Design by [Anton](https://dribbble.com/shots/15480691-Org-chart))
|
Futuristic - Full Functionality
|\r\n |
Prev version design
|\r\n\r\n\r\n#### Featured customizations:\r\n\r\n| | | | |\r\n|:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:|\r\n|\"screen
Light gradient version with horizontal layout
| \"screen
Compact layout
|\r\n\r\n\r\nCheck out several libraries and frameworks integrations\r\n\r\n* [Vue.js Integration](https://stackblitz.com/edit/d3-org-chart-vue-integration-su3d6r) \r\n* [React integration](https://stackblitz.com/edit/d3-org-chart-react-integration-hooks) \r\n* [Angular integration](https://stackblitz.com/edit/angular-ivy-gneris) \r\n\r\nCustom components & algorithms I used\r\n\r\n* [Curved edges - vertical](https://observablehq.com/@bumbeishvili/curved-edges-compacty-vertical) \r\n* [Curved edges - horizontal](https://observablehq.com/@bumbeishvili/curved-edges-compact-horizontal)\r\n* [Flextree Algorithm](https://github.com/Klortho/d3-flextree)\r\n\r\n\r\n### Usage\r\n\r\nTip: Just copy this code and paste at - https://realtimehtml.com/\r\n\r\n```html\r\n \r\n \r\n \r\n \r\n\r\n \r\n```\r\n\r\n### Installing\r\n\r\n```\r\nnpm i d3-org-chart\r\n```\r\n\r\n```javascript\r\nimport { OrgChart } from 'd3-org-chart';\r\n\r\n new OrgChart() \r\n .container()\r\n .data() // https://raw.githubusercontent.com/bumbeishvili/sample-data/main/org.csv\r\n .render();\r\n```\r\n\r\n### Quick Docs\r\n\r\nCheck the sample data here - https://github.com/bumbeishvili/sample-data/blob/main/org.csv\r\n\r\nFor the full functionality of exposed methods check [Futuristic Example](https://stackblitz.com/edit/web-platform-o5t1ha) and button bound functions\r\n\r\nFor the high level overview of margins and content setting check the image bellow\r\n\r\n![](https://user-images.githubusercontent.com/6873202/129315269-a2ef1c25-1078-486f-bf0a-0a05d273f354.png)\r\n\r\n\r\n\r\n\r\n## Notes & appreciations \r\nI created this org-chart when I was hired by [TeamApps](https://github.com/teamapps-org).\r\n\r\nAlthough 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. \r\n\r\nBig 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.\r\n\r\nAlso, thanks all people who made generous [donations](https://ko-fi.com/bumbeishvili), it gives me motivation to further improve this org chart component.\r\n\r\nThanks [contractzen](https://www.contractzen.com/) for the significant contribution, which made implementation of some of the most important features (optimal layout, exporting ) possible.\r\n\r\n\r\n\r\n## Author\r\n [David B (twitter)](https://twitter.com/dbumbeishvili) \r\n [David B (linkedin)](https://www.linkedin.com/in/bumbeishvili/) \r\n\r\nI 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\r\n\r\nYou can also [book data viz related consultation session](https://www.fiverr.com/share/4XxG21) with me\r\n\r\n","readmeFilename":"README.md"}