{"id":28269450,"url":"https://github.com/codeledge/entitree-flex","last_synced_at":"2025-06-16T20:30:38.556Z","repository":{"id":41871731,"uuid":"382705189","full_name":"codeledge/entitree-flex","owner":"codeledge","description":"Algorithm to layout trees of variable-sized nodes, while keeping linear runtime","archived":false,"fork":false,"pushed_at":"2022-04-25T14:19:47.000Z","size":229,"stargazers_count":80,"open_issues_count":2,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-27T02:58:58.898Z","etag":null,"topics":["d3-visualization","family-tree","graphs","layout","tree","tree-structure","trees","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/entitree-flex","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codeledge.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-03T20:35:32.000Z","updated_at":"2025-04-18T02:32:19.000Z","dependencies_parsed_at":"2022-08-11T19:50:41.320Z","dependency_job_id":null,"html_url":"https://github.com/codeledge/entitree-flex","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codeledge/entitree-flex","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeledge%2Fentitree-flex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeledge%2Fentitree-flex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeledge%2Fentitree-flex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeledge%2Fentitree-flex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codeledge","download_url":"https://codeload.github.com/codeledge/entitree-flex/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeledge%2Fentitree-flex/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260232720,"owners_count":22978593,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["d3-visualization","family-tree","graphs","layout","tree","tree-structure","trees","typescript"],"created_at":"2025-05-20T15:14:42.250Z","updated_at":"2025-06-16T20:30:38.529Z","avatar_url":"https://github.com/codeledge.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# entitree-flex\n\nThis is the core package that fuels the iconic https://www.entitree.com website!\n\nIn a paper from 2013, A.J. van der Ploeg enhanced the Tidy Tree (Reingold-Tilford) algorithm to allow\nfor variable-sized nodes, while keeping its linear runtime nature. He\ndescribed the algorithm in his paper, [Drawing Non-layered Tidy Trees in\nLinear Time](https://core.ac.uk/download/pdf/301654972.pdf). The author also provided a working Java application\non GitHub at https://github.com/cwi-swat/non-layered-tidy-trees\n\nThis package take it to the next level by allowing also side nodes, very useful if you are drawing family trees and pedigrees.\n\n## Examples\n\n\u003cimg width=\"951\" alt=\"Screenshot 2021-07-11 at 16 41 14\" src=\"https://user-images.githubusercontent.com/4820803/125201718-33e42d00-e268-11eb-95f0-d2b365b9f129.png\"\u003e\n\u003cimg width=\"921\" alt=\"Screenshot 2021-07-11 at 16 40 53\" src=\"https://user-images.githubusercontent.com/4820803/125201720-35155a00-e268-11eb-87c3-f71e38dcf7a5.png\"\u003e\n\u003cimg width=\"1070\" alt=\"Screenshot 2021-07-11 at 16 40 40\" src=\"https://user-images.githubusercontent.com/4820803/125201722-35adf080-e268-11eb-81fb-55372027958e.png\"\u003e\n\u003cimg width=\"503\" alt=\"Screenshot 2021-07-11 at 16 40 17\" src=\"https://user-images.githubusercontent.com/4820803/125201724-36468700-e268-11eb-87ee-f8a3b58c7323.png\"\u003e\n\n## Install\n\n```\nnpm i entitree-flex\n```\n\nOR\n\n```\nyarn add entitree-flex\n```\n\nIt does come with TS definitions\n\n## Usage from flat object\n\n```\nconst { layoutFromMap } = require(\"entitree-flex\")\n//or\nimport { layoutFromMap } from \"entitree-flex\"\n\nconst flatTree = {\n  1: {\n    name: \"root\",\n    width: 14,\n    children: [2, 3],\n    parents: [7]\n  },\n  2: { name: \"child2\" },\n  3: { name: \"child3\", children: [4, 5], spouses: [6] },\n  4: { name: \"grandChild4\" },\n  5: { name: \"grandChild5\" },\n  6: { name: \"spouse of child 3\" },\n  7: { name: \"parent of root\" },\n};\n\nconst { map, maxBottom, maxLeft, maxRight, maxTop, nodes, rels } = layoutFromMap(1, flatTree [, settings])\n```\n\n## Playground\n\nYou can play live in your browser with random trees or make your own tree for testing.\n\nJust run `yarn browser` and then open the file `playground/index.html` in your broser and see the results.\n\nEdit the `playground/source.js` file to see changes.\n\n## Settings\n\nStructure and defaults of the settings\n\n```\ndefaultSettings = {\n  clone: false, // returns a copy of the input, if your application does not allow editing the original object\n  enableFlex: true, // has slightly better perfomance if turned off (node.width, node.height will not be read)\n  firstDegreeSpacing: 15, // spacing in px between nodes belonging to the same source, eg children with same parent\n  nextAfterAccessor: \"spouses\", // the side node prop used to go sideways, AFTER the current node\n  nextAfterSpacing: 10, // the spacing of the \"side\" nodes AFTER the current node\n  nextBeforeAccessor: \"siblings\", // the side node prop used to go sideways, BEFORE the current node\n  nextBeforeSpacing: 10, // the spacing of the \"side\" nodes BEFORE the current node\n  nodeHeight: 40, // default node height in px\n  nodeWidth: 40, // default node width in px\n  orientation: \"vertical\", // \"vertical\" to see parents top and children bottom, \"horizontal\" to see parents left and\n  rootX: 0, // set root position if other than 0\n  rootY: 0, // set root position if other than 0\n  secondDegreeSpacing: 20, // spacing in px between nodes not belonging to same parent eg \"cousin\" nodes\n  sourcesAccessor: \"parents\", // the prop used as the array of ancestors ids\n  sourceTargetSpacing: 10, // the \"vertical\" spacing between nodes in vertical orientation, horizontal otherwise\n  targetsAccessor: \"children\", // the prop used as the array of children ids\n};\n```\n\n## Similar examples in javascript\n\n- https://github.com/d3/d3-hierarchy no bidirectional, no flexible, no side nodes\n- https://github.com/Klortho/d3-flextree no bidirectional, no side nodes\n\n## License\n\nGNU General Public License v3.0\n\nCopyright (c) 2022, Codeledge\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeledge%2Fentitree-flex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeledge%2Fentitree-flex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeledge%2Fentitree-flex/lists"}