{"id":13400698,"url":"https://github.com/bumbeishvili/org-chart","last_synced_at":"2026-04-02T18:02:25.061Z","repository":{"id":37564295,"uuid":"186745910","full_name":"bumbeishvili/org-chart","owner":"bumbeishvili","description":"Highly customizable org chart.  Integrations  available for Angular, React, Vue","archived":false,"fork":false,"pushed_at":"2025-04-09T06:46:32.000Z","size":251,"stargazers_count":1165,"open_issues_count":135,"forks_count":374,"subscribers_count":19,"default_branch":"master","last_synced_at":"2026-03-20T11:30:17.573Z","etag":null,"topics":["angular-org-chart","chart","company","d3","d3-tree","d3-treemap","hierarchy","org","org-chart","organization","organization-chart","orgchart","react-org-chart","tree","visualization","vue-org-chart"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/web-platform-o5t1ha","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bumbeishvili.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"bumbeishvili","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null,"polar":null}},"created_at":"2019-05-15T03:57:25.000Z","updated_at":"2026-03-18T08:42:45.000Z","dependencies_parsed_at":"2023-02-15T20:00:55.574Z","dependency_job_id":"4aa8afb8-a7d3-441e-b31f-d984f02abe58","html_url":"https://github.com/bumbeishvili/org-chart","commit_stats":{"total_commits":252,"total_committers":11,"mean_commits":22.90909090909091,"dds":"0.45238095238095233","last_synced_commit":"0b70fef70f801855e335f7db061237491eaa31fd"},"previous_names":["bumbeishvili/d3-organization-chart"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/bumbeishvili/org-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bumbeishvili%2Forg-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bumbeishvili%2Forg-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bumbeishvili%2Forg-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bumbeishvili%2Forg-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bumbeishvili","download_url":"https://codeload.github.com/bumbeishvili/org-chart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bumbeishvili%2Forg-chart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31312744,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-org-chart","chart","company","d3","d3-tree","d3-treemap","hierarchy","org","org-chart","organization","organization-chart","orgchart","react-org-chart","tree","visualization","vue-org-chart"],"created_at":"2024-07-30T19:00:54.745Z","updated_at":"2026-04-02T18:02:25.049Z","avatar_url":"https://github.com/bumbeishvili.png","language":"HTML","funding_links":["https://github.com/sponsors/bumbeishvili","https://ko-fi.com/bumbeishvili","https://polar.sh/bumbeishvili/subscriptions"],"categories":["HTML","Third Party Components"],"sub_categories":["Charts"],"readme":"[![SWUbanner](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://github.com/vshymanskyy/StandWithUkraine/blob/main/docs/README.md)\n\n# Highly customizable d3 based organization chart\n\n\u003cspan class=\"badge-npmversion\"\u003e\u003ca href=\"https://npmjs.org/package/d3-org-chart\" title=\"View this project on NPM\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/d3-org-chart.svg\" alt=\"NPM version\" /\u003e\u003c/a\u003e\u003c/span\u003e\n[![](https://img.shields.io/npm/dm/d3-org-chart)](https://npmjs.org/package/d3-org-chart)\n\n\u003cp align=\"center\"\u003e\n   \u003c!-- Thanks Vasturiano for this trick -  https://github.com/vasturiano --\u003e\n     \u003ca href=\"https://stackblitz.com/edit/web-platform-o5t1ha\"\u003e\u003cimg width=\"100%\" src=\"https://user-images.githubusercontent.com/6873202/129306455-09f47e5e-0dc8-41b5-8fe2-da3fa4e0f7ed.gif\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n[Medium article about this project](https://bumbeishvili.medium.com/introducing-a-new-v3-version-of-the-org-chart-ca1b63320a4b)\n\nHighly customizable org chart built with d3 v7.\n\n\n\n\n## Features\n\n\u003ctable\u003e\n\u003ctr\u003e\n   \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-mfzkbs?file=index.html\"\u003e\n      Simple Data \u003cbr/\u003e\n      \u003cimg  width=180  src=\"https://user-images.githubusercontent.com/6873202/209858323-9e135676-b95f-491f-897c-182f5d87ffae.png\"/\u003e   \n     \u003c/a\u003e\n   \u003c/td\u003e\n   \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-yw1urt?file=index.html\"\u003e\n          Custom Content  \u003cbr/\u003e\n          \u003cimg width=180 src=\"https://user-images.githubusercontent.com/6873202/209859788-0404aef9-793d-4f32-9209-bf1baec57a92.png\"/\u003e\n           \u003c/a\u003e\n   \u003c/td\u003e\n    \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-pwlmhf?file=index.html\"\u003e\n      Nested Data \u003cbr/\u003e\n      \u003cimg  width=180 src=\"https://user-images.githubusercontent.com/6873202/209858323-9e135676-b95f-491f-897c-182f5d87ffae.png\"/\u003e   \n     \u003c/a\u003e\n   \u003c/td\u003e\n    \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-36myfl?file=index.html\"\u003e\n      Online JSON Data \u003cbr/\u003e\n      \u003cimg  width=180  src=\"https://user-images.githubusercontent.com/6873202/209858323-9e135676-b95f-491f-897c-182f5d87ffae.png\"/\u003e   \n     \u003c/a\u003e\n   \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n  \n   \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-dppjis?file=index.html\"\u003e\n          CSV Data  \u003cbr/\u003e\n          \u003cimg width=180 src=\"https://user-images.githubusercontent.com/6873202/209864352-d0cbb5d7-0541-4239-86cc-428778a3bb35.png\"/\u003e\n           \u003c/a\u003e\n   \u003c/td\u003e\n    \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-rvwpza?file=index.html\"\u003e\n       Styled Tree \u003cbr/\u003e\n      \u003cimg width=180   src=\"https://user-images.githubusercontent.com/6873202/209865473-f9c3c846-5602-47a7-8cea-6a3eed3852c0.png\"/\u003e   \n     \u003c/a\u003e\n   \u003c/td\u003e\n   \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-bexsmx?file=index.html\"\u003e\nExpand Node\u003cimg width=180  src=\"https://user-images.githubusercontent.com/6873202/209938311-74dcd25f-9fb2-4b30-a7cd-bd076f5762cc.gif\"/\u003e\n     \u003c/a\u003e\n   \u003c/td\u003e\n      \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-zkmxvd?file=index.html\"\u003e\nCollapse Node\u003cimg width=180  src=\"https://user-images.githubusercontent.com/6873202/209940922-f115f7f3-f5b3-4b79-b96a-9b8b7d2c1d34.gif\"/\u003e\n     \u003c/a\u003e\n   \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n  \n   \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-bb4p4k?file=index.html\"\u003e\nAdd Node\u003cimg width=180 src=\"https://user-images.githubusercontent.com/6873202/209946403-61cc6808-7e2c-46a2-bf78-3206bbaac2fa.gif\"/\u003e\n           \u003c/a\u003e\n   \u003c/td\u003e\n    \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-qhrowa?file=index.html\"\u003e\nRemove Node\u003cimg width=180   src=\"https://user-images.githubusercontent.com/6873202/209946956-673679ba-8f59-4f59-b243-d78611e6650f.gif\"/\u003e   \n     \u003c/a\u003e\n   \u003c/td\u003e\n   \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-q8n1mh?file=index.html\"\u003e\nFit Screen\u003cimg width=180  src=\"https://user-images.githubusercontent.com/6873202/209947575-c75098b8-10f5-406d-afa8-de2fdd16bf76.gif\"/\u003e\n     \u003c/a\u003e\n   \u003c/td\u003e\n      \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-2ct1nt?file=index.html\"\u003e\nChange Layout\u003cimg width=180  src=\"https://user-images.githubusercontent.com/6873202/209948708-367b2802-c238-400c-a1ca-9908a6df549c.gif\"/\u003e\n     \u003c/a\u003e\n   \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n   \n   \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-rywzga?file=index.html\"\u003e\nCenter Node\u003cimg width=180 src=\"https://user-images.githubusercontent.com/6873202/209949412-2e2b0084-5bb5-4eb5-9570-e5b83193b047.gif\"/\u003e\n           \u003c/a\u003e\n   \u003c/td\u003e\n    \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-rkjhzz?file=index.html\"\u003e\nHighlight Node\u003cimg width=180   src=\"https://user-images.githubusercontent.com/6873202/209951335-e77f996c-fe4f-4274-8b91-fe28a65b4231.gif\"/\u003e   \n     \u003c/a\u003e\n   \u003c/td\u003e\n   \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-wrvy45?file=index.html\"\u003e\nFullscreen\u003cimg width=180  src=\"https://user-images.githubusercontent.com/6873202/209955345-13040bed-f75e-4799-911e-f11bfa5f2164.gif\"/\u003e\n     \u003c/a\u003e\n   \u003c/td\u003e\n      \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-zd21e3?file=index.html\"\u003e\nZoom in and out\u003cimg width=180  src=\"https://user-images.githubusercontent.com/6873202/209957228-6b6ce3fa-a336-4098-b8c3-91d53c93f4eb.gif\"/\u003e\n     \u003c/a\u003e\n   \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\n\u003ctr\u003e\n   \n   \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-ue1cpj?file=index.html\"\u003e\nExport\u003cimg width=180 src=\"https://user-images.githubusercontent.com/6873202/209969502-6450648a-6a5c-460b-a23a-8c2ed0a81d2f.gif\"/\u003e\n           \u003c/a\u003e\n   \u003c/td\u003e\n    \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-nqzjts?file=index.html\"\u003e\nExpand \u0026 Collapse All\u003cimg width=180   src=\"https://user-images.githubusercontent.com/6873202/209975052-c79464fe-664e-4b61-9b3f-79776c883113.gif\"/\u003e   \n     \u003c/a\u003e\n   \u003c/td\u003e\n   \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-tpbt7r?file=index.html\"\u003e\nMulti Node Connections\u003cimg width=180  src=\"https://user-images.githubusercontent.com/6873202/209976678-40db509e-98d7-40a4-8032-c30c60b724f3.gif\"/\u003e\n     \u003c/a\u003e\n   \u003c/td\u003e\n      \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-pr15gr?file=index.html\"\u003e\nPaging \u003cimg width=180  src=\"https://user-images.githubusercontent.com/6873202/209983512-1ecfc080-7570-430b-8770-feca5b6830fd.gif\"/\u003e\n     \u003c/a\u003e\n   \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\n\u003ctr\u003e\n   \n   \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-sbp88f?file=index.html\"\u003e\nHorizontal View\u003cimg width=180 src=\"https://user-images.githubusercontent.com/6873202/209984126-c70565a5-f343-44fd-9006-7f74cd1dd3cd.gif\"/\u003e\n           \u003c/a\u003e\n   \u003c/td\u003e\n\n  \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-mc1rt4?file=index.html\"\u003e\nActive node centering\u003cimg width=180 src=\"https://user-images.githubusercontent.com/6873202/209985365-987fa6fb-523c-40be-8e6f-ddba856b7435.gif\"/\u003e\n           \u003c/a\u003e\n   \u003c/td\u003e\n     \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-fc2rrs?file=index.html\"\u003e\nInteractive Node\u003cimg width=180 src=\"https://user-images.githubusercontent.com/6873202/209988894-b294efbe-b021-4d5c-a7a5-7db4c8b22cd6.gif\"/\u003e\n           \u003c/a\u003e\n   \u003c/td\u003e\n     \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-wdexqc?file=index.html\"\u003e\nSearching org chart \u003cimg width=180 src=\"https://user-images.githubusercontent.com/6873202/268379088-9ddd5545-b2c8-46c5-a98e-377c456db885.gif\"/\u003e\n           \u003c/a\u003e\n   \u003c/td\u003e\n   \n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n   \n   \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-1kytuv?file=index.html\"\u003e\nScrollable content \u003cimg width=180 src=\"https://user-images.githubusercontent.com/6873202/268471825-f1581769-21f3-419d-a32a-dbd2629ab2a0.gif\"/\u003e\n           \u003c/a\u003e\n   \u003c/td\u003e\n\n   \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-mb8ayg?file=index.html\"\u003e\nData driven size \u003cimg width=180 src=\"https://user-images.githubusercontent.com/6873202/271422549-e9ca006d-98d6-49a8-9117-83094f955bed.gif\"/\u003e\n           \u003c/a\u003e\n   \u003c/td\u003e\n\n  \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-vhhxqs?file=index.html\"\u003e\nDropdown \u003cimg width=180 src=\"https://raw.githubusercontent.com/bumbeishvili/Assets/master/Other/dropdown.gif\"/\u003e\n           \u003c/a\u003e\n   \u003c/td\u003e\n\n  \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-qm3aga?file=index.html\"\u003e\nMulti Root \u003cimg width=180 src=\"https://raw.githubusercontent.com/bumbeishvili/Assets/master/Other/multi-roots.gif\"/\u003e\n           \u003c/a\u003e\n   \u003c/td\u003e\n\n\n   \n\u003c/tr\u003e\n\n\n\n\u003ctr\u003e\n   \n   \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-jxlesrne?file=index.html\"\u003e\nMinimap \u003cimg width=180 src=\"\"/\u003e\n           \u003c/a\u003e\n   \u003c/td\u003e\n\n  \n\n\n   \n\u003c/tr\u003e\n\n\n\n\n\n\u003c/table\u003e\n\n\n\n\n## Community Samples\n\n\u003ctable\u003e\n\u003ctr\u003e\n\n\n  \u003ctd\u003e\n     \u003ca href=\"https://stackblitz.com/edit/js-bmyjfc?file=index.html\"\u003e\nDrag \u0026 Drop Nodes \u003cimg width=180 src=\"https://raw.githubusercontent.com/bumbeishvili/Assets/master/Other/drag-drop.gif\"/\u003e\n           \u003c/a\u003e\n   \u003c/td\u003e\n\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\n## How to use\n\n\nJust copy this code and paste at - [https://realtimehtml.com/](https://realtimehtml.com#code=DwZwxgTglgDgLgAhBMBeARACznGIBcA9IQCYDMAViAHQD2EA5qWdQG4Ds1AtlAHbVV0APmCFw0eEIBQoSLETI0WHHiKEwJflRIBTADZRWEarx1xCvGF2YBaegxthMAQwhwAAmWGjx86bIkFFAxsXAJiDS0QXQMjEzMLK1sAMz0dAA84CB0ddwAmagBGajzCACMAVyg9EhS0zOydARBvMTlJGRJDBDA9ZxAQDCdXOEdaXjhnPh0IVq7WaRlfDoRWVx6XNwBuKQRyXYRqMBBWAAoDhGUwtQhnAHdqBig4TArKkBmwcbgdCaPaayVLhlHRQECYVjVKBiZxcGBpGwkZyTQhcKa8Qj2I4ndAHACUB2oL1+p1OSMmeIQqCECAA3hdhm4qQhTHc9iwAPKMADCmzgpzx-wm6Jmp3QRz5Y2F01mgvJzjJyOcguyvF0EAFOwQCAAvnidj52nAhEA)\n\n```html\n\u003cscript src=\"https://d3js.org/d3.v7.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/d3-org-chart@3\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/d3-flextree@2.1.2/build/d3-flextree.js\"\u003e\u003c/script\u003e\n\u003cdiv class=\"chart-container\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n var chart;\n d3\n  .csv(\n   \"https://raw.githubusercontent.com/bumbeishvili/sample-data/main/org.csv\"\n  )\n  .then((data) =\u003e {\n   chart = new d3.OrgChart().container(\".chart-container\").data(data).render();\n  });\n\u003c/script\u003e\n```\n\n### Installing\n\n```\nnpm i d3-org-chart\n```\n\n```javascript\nimport { OrgChart } from 'd3-org-chart';\n\n new OrgChart()\n     .container(\u003cDomElementOrCssSelector\u003e)\n     .data(\u003cData\u003e) // https://github.com/bumbeishvili/sample-data/blob/main/data-oracle.csv\n     .render();\n```\n\n\nIn 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.\n\n\nFor example, one of the property name inside `attrs` object is `duration`, which controls animation duration for chart, when expanding or collapsing nodes.\n\nIf we want to get the value, we can either do\n\n```javascript\nchart.getChartState().duration\n```\n\nor directly\n```javascript\nchart.duration()\n```\n\n`chart` in the above case is an instance of `OrgChart` class. We can get it using `new OrgChart()`\n\nIf we want to set property, we can pass argument to the same function and it will automatically set the value\n\n```javascript\nchart.duration(3000)  // This will become very slow moving chart\n```\nYou can see list of all properties , their description of what each property does in the actual source code.\n\nhttps://github.com/bumbeishvili/org-chart/blob/5be7e0962e46013b3a95dd19f41f829c3c853d1f/src/d3-org-chart.js#L41\n\nBe aware that they are chainable, so if we wanted to set multiple properties, we would do this\n\n```javascript\nconst chart = new OrgChart()\n                    .data(ourData)\n                    .container(ourDomElementOrCssSelector)\n                    .duration(ourDuration)\n                    .render()\n\n\n// We can keep chaining values in runtime\nchart.data(updatedData).render()\n\n```\n\n\nHave 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).\n\n## Jump To Examples\n\n|                                                                                                                                                                                                                                                                                                   |                                                                                                                                                                                                                                                          |\n| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n|                                  \u003ca href=\"https://stackblitz.com/edit/web-platform-sgsxzp\"\u003e\u003cimg height=\"400px\"  src=\"https://user-images.githubusercontent.com/6873202/128979415-1b7fb969-6fc6-4a25-9ae2-87da7a9b031c.png\"\u003e\u003c/a\u003e \u003cdiv style=\"100%\"\u003eDefault\u003c/div\u003e                                   |              \u003ca href=\"https://stackblitz.com/edit/web-platform-jyncb9\"\u003e\u003cimg  height=\"400px\"   src=\"https://user-images.githubusercontent.com/6873202/128979000-e5111571-8021-4c56-93d3-8d40dfe57536.png\"\u003e\u003c/a\u003e \u003cdiv style=\"100%\"\u003eSky \u003c/div\u003e               |\n|                                 \u003ca href=\"https://stackblitz.com/edit/web-platform-lwyild\"\u003e\u003cimg  height=\"400px\"   src=\"https://user-images.githubusercontent.com/6873202/128978399-32f890c6-86f7-46e2-b41e-58202e61f03b.png\"\u003e\u003c/a\u003e \u003cdiv style=\"100%\"\u003eCircles\u003c/div\u003e                                  |              \u003ca href=\"https://stackblitz.com/edit/web-platform-uhd3q7\"\u003e\u003cimg  height=\"400px\"   src=\"https://user-images.githubusercontent.com/6873202/129042576-0a8b27da-7a9d-4dee-b5b6-68080772cc9f.png\"\u003e\u003c/a\u003e \u003cdiv style=\"100%\"\u003eOval\u003c/div\u003e               |\n| \u003ca href=\"https://stackblitz.com/edit/web-platform-3gwnsg\"\u003e\u003cimg  height=\"400px\"   src=\"https://user-images.githubusercontent.com/6873202/129054271-21ba5182-38c5-4856-bb21-727bba49243a.png\"\u003e\u003c/a\u003e \u003cdiv style=\"100%\"\u003eClean (Design by [Anton](https://dribbble.com/shots/15480691-Org-chart))\u003c/div\u003e | \u003ca href=\"https://stackblitz.com/edit/web-platform-o5t1ha\"\u003e\u003cimg  height=\"400px\"   src=\"https://user-images.githubusercontent.com/6873202/129182014-610b6761-6dd4-4847-92cb-66407a900d03.png\"\u003e\u003c/a\u003e \u003cdiv style=\"100%\"\u003eFuturistic - Full Functionality\u003c/div\u003e |\n|                           \u003ca href=\"https://stackblitz.com/edit/web-platform-thplyq\"\u003e\u003cimg  height=\"400px\"   src=\"https://user-images.githubusercontent.com/6873202/129419379-a9d055c8-723c-468f-bd87-4762ba721d87.png\"\u003e\u003c/a\u003e \u003cdiv style=\"100%\"\u003ePrev version design\u003c/div\u003e                            |\n\n#### Featured customizations:\n\nCheck out several libraries and frameworks integrations\n\n- [Vue.js Integration](https://stackblitz.com/edit/vue-wx7syy?file=src%2FChart.js)\n- [React integration](https://stackblitz.com/edit/d3-org-chart-react-integration-hooks)\n- [Angular integration](https://stackblitz.com/edit/angular-ivy-gneris)\n\nCustom components \u0026 algorithms I used\n\n- [Curved edges - vertical](https://observablehq.com/@bumbeishvili/curved-edges-compacty-vertical)\n- [Curved edges - horizontal](https://observablehq.com/@bumbeishvili/curved-edges-compact-horizontal)\n- [Flextree Algorithm](https://github.com/Klortho/d3-flextree)\n\n\n### Quick Docs\n\nCheck the sample data here - https://github.com/bumbeishvili/sample-data/blob/main/data-oracle.csv\n\nFor the full functionality of exposed methods check [Futuristic Example](https://stackblitz.com/edit/web-platform-o5t1ha) and button bound functions\n\nFor the high level overview of margins and content setting check the image bellow\n\n![](https://user-images.githubusercontent.com/6873202/129315269-a2ef1c25-1078-486f-bf0a-0a05d273f354.png)\n\n## Notes \u0026 appreciations\n\nI created this org-chart when I was hired by [TeamApps](https://github.com/teamapps-org).\n\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.\n\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.\n\nAlso, thanks all people who made generous [donations](https://ko-fi.com/bumbeishvili), it gives me motivation to further improve this org chart component.\n\nThanks [contractzen](https://www.contractzen.com/) for the significant contribution, which made implementation of some of the most important features (optimal layout, exporting ) possible.\n\n## Author\n\n[David B (twitter)](https://twitter.com/dbumbeishvili)  \n [David B (linkedin)](https://www.linkedin.com/in/bumbeishvili/)\n\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\n\nYou can also [book data viz related consultation session](https://www.fiverr.com/share/4XxG21) with me.\n\nYou might not need a consultation, but you want to appreciate the time and effort I am putting into this library, and if you correspond with an organization, you might also want to enjoy private QA about org chart over emails. In that case, you can support the org chart via [polar.sh/bumbeishvili](https://polar.sh/bumbeishvili/subscriptions)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbumbeishvili%2Forg-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbumbeishvili%2Forg-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbumbeishvili%2Forg-chart/lists"}