{"id":28417508,"url":"https://github.com/JMHeartley/dTree-Seed","last_synced_at":"2025-06-26T12:31:26.380Z","repository":{"id":65348456,"uuid":"563099378","full_name":"JMHeartley/dTree-Seed","owner":"JMHeartley","description":"A library for converting a list of objects into a hierarchical data structure for dTree.","archived":false,"fork":false,"pushed_at":"2023-11-20T18:50:04.000Z","size":150,"stargazers_count":5,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-04T11:37:09.886Z","etag":null,"topics":["d3","data-massager","dtree","family-tree","genealogy","hierarchical-data","javascript","typescript","visualizing-data-trees"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/JMHeartley.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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}},"created_at":"2022-11-07T22:44:46.000Z","updated_at":"2025-05-22T07:09:15.000Z","dependencies_parsed_at":"2024-11-08T22:43:56.129Z","dependency_job_id":"f1d264e8-ef94-4ba0-802d-ce4a8f6b993c","html_url":"https://github.com/JMHeartley/dTree-Seed","commit_stats":null,"previous_names":["jmheartley/dtree-seeder"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JMHeartley/dTree-Seed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JMHeartley%2FdTree-Seed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JMHeartley%2FdTree-Seed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JMHeartley%2FdTree-Seed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JMHeartley%2FdTree-Seed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JMHeartley","download_url":"https://codeload.github.com/JMHeartley/dTree-Seed/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JMHeartley%2FdTree-Seed/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262067872,"owners_count":23253686,"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","data-massager","dtree","family-tree","genealogy","hierarchical-data","javascript","typescript","visualizing-data-trees"],"created_at":"2025-06-04T06:10:01.404Z","updated_at":"2025-06-26T12:31:26.373Z","avatar_url":"https://github.com/JMHeartley.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  🌳 dTree-Seed 🌰\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ci\u003e\n    A library for converting a list of objects into a hierarchical data structure for \n    \u003ca href=\"https://github.com/ErikGartner/dTree\"\u003edTree.\u003c/a\u003e\n  \u003c/i\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#ℹ%EF%B8%8F-about\"\u003eAbout\u003c/a\u003e •\n  \u003ca href=\"#-demo\"\u003eDemo\u003c/a\u003e •\n  \u003ca href=\"#-installation\"\u003eInstallation\u003c/a\u003e •\n  \u003ca href=\"#-requirements\"\u003eRequirements\u003c/a\u003e •\n  \u003ca href=\"#-usage\"\u003eUsage\u003c/a\u003e •\n  \u003ca href=\"#%EF%B8%8F-acknowledgements\"\u003eAcknowledgements\u003c/a\u003e •\n  \u003ca href=\"#-technologies-used\"\u003eTechnologies Used\u003c/a\u003e •\n  \u003ca href=\"#-license\"\u003eLicense\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"/LICENSE\"\u003e\n    \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/jmheartley/dtree-seed?color=red\" alt=\"MIT License\"\u003e\n  \u003c/a\u003e\n  \u003cimg alt=\"GitHub last commit\" src=\"https://img.shields.io/github/last-commit/jmheartley/dtree-seed?color=orange\"\u003e\n  \u003cimg alt=\"GitHub contributors\" src=\"https://img.shields.io/github/contributors/jmheartley/dtree-seed?color=yellow\"\u003e\n  \u003cimg alt=\"Lines of code\" src=\"https://img.shields.io/badge/total%20lines-4.4k-brightgreen\"\u003e\n  \u003cimg alt=\"GitHub repo size\" src=\"https://img.shields.io/github/repo-size/jmheartley/dtree-seed\"\u003e\n  \u003cimg alt=\"NPM version\" src=\"https://img.shields.io/npm/v/dtree-seed?color=blueviolet\"\u003e\n\u003c/p\u003e\n\n\n\n## ℹ️ About\nStructuring data for dTree is hard... but not anymore! Painlessly, with just one method call, you can:\n+ Filter data for the following objects:\n  + Target\n  + Target's parents\n  + Target's siblings (that share both parents)\n  + Target's children (where target is listed a parent)\n  + Target's spouses (where listed as other parent of a child)\n  + Target's descendents (grandchildren, children's spouses, great-grandchildren, etc.)\n+ Dynamically set CSS classes and custom render data for each node\n+ Return a hierarchical data structure, [formatted as specified by dTree's README](https://github.com/ErikGartner/dTree#usage)\n\n**Before**\n```javascript\n[\n    {\n        \"id\": 0,\n        \"name\": \"Father\",\n        \"parent1Id\": null,\n        \"parent2Id\": null\n    },\n    {\n        \"id\": 1,\n        \"name\": \"Mother\",\n        \"parent1Id\": null,\n        \"parent2Id\": null\n    },\n    {\n        \"id\": 2,\n        \"name\": \"Child\",\n        \"parent1Id\": 0,\n        \"parent2Id\": 1\n    }\n]\n```\n**After**\n```javascript\n[\n  {\n    \"id\": 0,\n    \"name\": \"Father\",\n    \"depthOffset\": 1,\n    \"marriages\": [{\n      \"spouse\": {\n        \"id\": 1,\n        \"name\": \"Mother\",\n        \"depthOffset\": 1\n      },\n      \"children\": [{\n        \"id\": 2,\n        \"name\": \"Child\",\n        \"depthOffset\": 2\n      }]\n    }],\n    \"extra\": {}\n  }\n]\n```\n\n\n\n## 🚗 Demo\nCheck out how dTree-Seed can be used to recreate the dTree sample on [JSFiddle](https://jsfiddle.net/heartleyjm/zw1ukt60/25/).\n\n\n\n## 📦 Installation\nThere are a few ways to start working with dTree-Seed, all of which globally expose the `dSeeder` variable:\n1. Manually download the compiled file `dSeeder.js` from [dist](/dist) to your appropriate project folder and load using a relative path:\n```html\n\u003cscript src=\"/path/to/dSeeder.js\"\u003e\u003c/script\u003e\n```\n2. Use `\u003cscript\u003e` to reference the code through [jsDelivr's CDN](https://www.jsdelivr.com/package/npm/dtree-seed):\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/dtree-seed@1.0.0/dist/dSeeder.min.js\"\u003e\u003c/script\u003e\n```\n3. Install as a [package via npm](https://www.npmjs.com/package/dtree-seed) with the following command:\n```bash\nnpm install dtree-seed\n```\n\n\n\n## ⛽ Requirements\ndTree-Seed has no dependencies itself as it's just a data processor. However, it's intended for use with [dTree](https://github.com/ErikGartner/dTree) v2.4.1, which requires the following:\n```html\n\u003c!-- required for dTree --\u003e\n\u003cscript src=\"https://d3js.org/d3.v4.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js\"\u003e\u003c/script\u003e\n\u003c!-- load dTree --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/d3-dtree@2.4.1/dist/dTree.min.js\"\u003e\u003c/script\u003e\n```\n\n\n## 🚘 Usage\nTo preprocess your data for dTree, use the `dSeeder.seed()` command:\n```javascript\nseededData = dSeeder.seed(data, targetId, options);\ndTree.init(seededData);   // command provided by dTree\n```\n\n\n\n### 💾 Data\nThe `data` object should be an `array` of `object`s, each of which should have *at least* these properties:\n```javascript\n[{\n        id: number,\n        name: \"Hugh Mann\", // optional, but recommended\n        parent1Id: number, // use null for no value\n        parent2Id: number  // use null for no value\n}]\n```\n**Note**: if `parent1Id` or `parent2Id` references an `id`, but no object in `data` \ncontains that `id`, an error will be thrown. In such cases, please set that property to `null`.\n\n*See [Member](/src/member.ts) for the Typescript interface for objects in data.*\n\n\n\n### 🎯 TargetId\nThe `targetId` is the `id` of the object you wish to build your tree around. \n\n\n\n### 🤔 Options\nAdd [callbacks](https://www.freecodecamp.org/news/what-is-a-callback-function-in-javascript/) \nto the `options` object to dyanmically set the corresponding `class`, `textClass`, and `extra` \nproperties for each node.\n\nEach callback takes a `member` object, which is an object in your data.\n```javascript\n{\n    class: (member) =\u003e string,      // sets CSS class of each node\n    textClass: (member) =\u003e string,  // sets CSS class of text in each node\n    extra: (member) =\u003e object       // sets extra object, custom data for renders\n}\n```\n`options` is an optional parameter, when no callbacks are used, `class` and ` textClass` \nwill default to an empty string and `extra` to an empty object for each node.\n\n*See [SeederOptions](/src/seederOptions.ts) for its Typescript interface.*\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 Examples\u003c/summary\u003e\n\n#### class\nIf your objects have an `ageInYears` property that cooresponds with a \nCSS class named `minor` for people younger than 18, \nyou can conditionally set the CSS of the node using the `class` callback:\n```javascript\n{\n    class: (member) =\u003e {\n        if (member.ageInYears \u003c 18)\n            return \"minor\";\n    }\n}\n```\n\n#### textClass\nIf you want to set the same CSS class `fw-bold` for all node text, \nreturn a static value using the `textClass` callback:\n```javascript\n{\n  textClass: (member) =\u003e \"fw-bold\"\n}\n```\n\n#### extra\nIf you have properties on each `member` you want to persist on each node in the tree,\nyou can pass them into an object using `extra` callback:\n```javascript\n{\n  extra: (member) =\u003e {\n    return {\n      height: member.height,\n      ageInYears: member.ageInYears,\n      favoriteColor: member.favoriteColor\n    };\n  }\n}\n```\nThe `extra` object is passed to [dTree's callbacks](https://github.com/ErikGartner/dTree#callbacks)\n, the above properties would accessbile on the `extra` parameter using `extra.height`, `extra.ageInYears`, and `extra.favoriteColor`.\n\nFor the above examples, here's what the `data` might look like:\n```javascript\n[{\n        id: 0,\n        parent1Id: null,\n        parent2Id: null,\n        name: \"Father\",\n        ageInYears: 26,\n        height: \"5ft 9in\"\n        favoriteColor: \"Green\"\n},\n{\n        id: 1,\n        parent1Id: null,\n        parent2Id: null,\n        name: \"Mother\",\n        ageInYears: 24,\n        height: \"5ft 6in\",\n        favoriteColor: \"Blue\"\n},\n{\n        id: 2,\n        parent1Id: 0,\n        parent2Id: 1,\n        name: \"Child\",\n        ageInYears: 1,\n        height: \"2ft 5in\",\n        favoriteColor: null\n}];\n```\n\n*For more examples on how to use the options object, check out [its unit tests](/src/tests/seederTest.ts#L782).*\n\u003c/details\u003e\n\n\n\n## ❤️ Acknowledgements\n🧙🏻 [Erik Gärtner](https://github.com/ErikGartner) for writing and sharing dTree\n\n👩🏿‍🏫 [Microsoft Learn](https://learn.microsoft.com/en-us/training/paths/build-javascript-applications-typescript/) \nfor [teaching me Typescript](https://learn.microsoft.com/en-us/training/achievements/learn.language.build-javascript-applications-typescript.trophy?username=JMHeartley)\n\n\n\n## 👩‍💻 Technologies Used\n+ [Typescript](https://www.typescriptlang.org/) - Javascript superset\n+ [Mochajs](https://mochajs.org/) - testing framework\n+ [Chaijs](https://www.chaijs.com/) - assertion library\n+ [VSCode](https://code.visualstudio.com/) - code editor\n\n\n\n## 📃 License\n[The MIT License (MIT)](/LICENSE)\n\nCopyright (c) 2022 Justin M Heartley\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJMHeartley%2FdTree-Seed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJMHeartley%2FdTree-Seed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJMHeartley%2FdTree-Seed/lists"}