{"id":20033229,"url":"https://github.com/benportner/js_family_tree","last_synced_at":"2025-05-05T05:31:05.072Z","repository":{"id":43322015,"uuid":"248566882","full_name":"BenPortner/js_family_tree","owner":"BenPortner","description":"An interactive family tree visualization using d3-dag","archived":false,"fork":false,"pushed_at":"2023-12-19T22:47:08.000Z","size":236,"stargazers_count":80,"open_issues_count":11,"forks_count":32,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-08T17:21:23.579Z","etag":null,"topics":["collapsible","d3-dag","family-tree","javascript","tooltip","transition"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BenPortner.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":"2020-03-19T17:39:42.000Z","updated_at":"2025-03-14T15:08:55.000Z","dependencies_parsed_at":"2024-11-13T09:45:22.821Z","dependency_job_id":"ae8232b7-e80a-443f-a28c-85504d0e6110","html_url":"https://github.com/BenPortner/js_family_tree","commit_stats":{"total_commits":56,"total_committers":5,"mean_commits":11.2,"dds":0.3035714285714286,"last_synced_commit":"211d1a4de08ebb6f53f976ab9a3c4e28583e019d"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BenPortner%2Fjs_family_tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BenPortner%2Fjs_family_tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BenPortner%2Fjs_family_tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BenPortner%2Fjs_family_tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BenPortner","download_url":"https://codeload.github.com/BenPortner/js_family_tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252445811,"owners_count":21749122,"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":["collapsible","d3-dag","family-tree","javascript","tooltip","transition"],"created_at":"2024-11-13T09:45:13.037Z","updated_at":"2025-05-05T05:31:05.067Z","avatar_url":"https://github.com/BenPortner.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# js_family_tree\n\nInteractive visualization and -exploration tool for large family trees.\n\nAuthor: Benjamin W. Portner\n\nLicense: GNU General Public License v3.0\n\n[Live example here.](https://rawcdn.githack.com/BenPortner/js_family_tree/31118b43b0933e8ff1f3210e32ae9e9d347da365/familytree.html) (Kudos to [Pavel Puchkin](https://neoascetic.me/) from [githack.com](https://raw.githack.com/) for providing the caching proxy!)\n\n[JSFiddle here.](https://jsfiddle.net/BenPortner/6mnt1wy4/18/)\n\n## Features\n\nThe code is based on the [collapsible d3 tree example](https://bl.ocks.org/d3noob/43a860bc0024792f8803bba8ca0d5ecd) by d3noob.\n\nFeatures in the original:\n- uses [d3-hierarchy](https://github.com/d3/d3-hierarchy)\n- collapsible children nodes\n- nice transitions\n \nNew features:\n- uses [d3-dag](https://github.com/erikbrinkman/d3-dag) instead of d3-hierarchy (allows two parents per node)\n- introduces union nodes to connect parents and children via common way point\n- nodes are collapsible in all directions: children, parents, partners (nodes memorize their dependencies)\n- use [d3-tip](https://github.com/caged/d3-tip) to show metadata on hover\n- use d3-zoom to enable zooming and panning\n\n## How to use\n\n- Edit `data/data.js` to represent your family tree\n- Open `familytree.html`\n- Done!\n\n## Data format\n\nThe file `data/data.js` contains a single javascript object, which represents the family tree. The fields are as follows:\n\n- `start`: Enter here the id of the person, which should be the starting point of the family tree.\n- `persons`: Contains metadata about each person. Make sure each `id` is unique. Also, make sure each element in `own_unions` refers to a valid `union` defined in `data.unions`.\n- `unions`: Contains metadata about each family. Each entry in `partner` and `children` must refer to a valid `person` defined in `data.persons`.\n- `links`: Defines how unions and persons are to be linked (edge list). Basically an alternative representation of the information contained in `person.own_unions`, `union.partner` and `union.children`. Unfortunately, this redundancy is for now necessary to ensure proper functioning of the code!\n\n```javascript\ndata = {\n    \"start\":\"id4\",\n    \"persons\": {\n        \"id1\": { \"id\": \"id1\", \"name\": \"Adam\", \"birthyear\": 1900, \"deathyear\": 1980, \"own_unions\": [\"u1\"], \"birthplace\":\"Alberta\", \"deathplace\":\"Austin\"},\n        \"id2\": { \"id\": \"id2\", \"name\": \"Berta\", \"birthyear\": 1901, \"deathyear\": 1985, \"own_unions\": [\"u1\"], \"birthplace\":\"Berlin\", \"deathplace\":\"Bern\" },\n        \"id3\": { \"id\": \"id3\", \"name\": \"Charlene\", \"birthyear\": 1930, \"deathyear\": 2010, \"own_unions\": [\"u3\", \"u4\"], \"parent_union\": \"u1\", \"birthplace\":\"Château\", \"deathplace\":\"Cuxhaven\" },\n        \"id4\": { \"id\": \"id4\", \"name\": \"Dan\", \"birthyear\": 1926, \"deathyear\": 2009, \"own_unions\": [], \"parent_union\": \"u1\", \"birthplace\":\"den Haag\", \"deathplace\":\"Derince\" },\n        \"id5\": { \"id\": \"id5\", \"name\": \"Eric\", \"birthyear\": 1931, \"deathyear\": 2015, \"own_unions\": [\"u3\"], \"parent_union\": \"u2\", \"birthplace\":\"Essen\", \"deathplace\":\"Edinburgh\" },\n        \"id6\": { \"id\": \"id6\", \"name\": \"Francis\", \"birthyear\": 1902, \"deathyear\": 1970, \"own_unions\": [\"u2\"], \"birthplace\":\"Firenze\", \"deathplace\":\"Faizabad\" },\n        \"id7\": { \"id\": \"id7\", \"name\": \"Greta\", \"birthyear\": 1905, \"deathyear\": 1990, \"own_unions\": [\"u2\"] },\n        \"id8\": { \"id\": \"id8\", \"name\": \"Heinz\", \"birthyear\": 1970, \"own_unions\": [\"u5\"], \"parent_union\": \"u3\" },\n        \"id9\": { \"id\": \"id9\", \"name\": \"Iver\", \"birthyear\": 1925, \"deathyear\": 1963, \"own_unions\": [\"u4\"] },\n        \"id10\": { \"id\": \"id10\", \"name\": \"Jennifer\", \"birthyear\": 1950, \"own_unions\": [], \"parent_union\": \"u4\" },\n        \"id11\": { \"id\": \"id11\", \"name\": \"Klaus\", \"birthyear\": 1933, \"deathyear\": 2013, \"own_unions\": [], \"parent_union\": \"u1\" },\n        \"id12\": { \"id\": \"id12\", \"name\": \"Lennart\", \"birthyear\": 1999, \"own_unions\": [], \"parent_union\": \"u5\" },\n    },\n    \"unions\": {\n        \"u1\": { \"id\": \"u1\", \"partner\": [\"id1\", \"id2\"], \"children\": [\"id3\", \"id4\", \"id11\"] },\n        \"u2\": { \"id\": \"u2\", \"partner\": [\"id6\", \"id7\"], \"children\": [\"id5\"] },\n        \"u3\": { \"id\": \"u3\", \"partner\": [\"id3\", \"id5\"], \"children\": [\"id8\"] },\n        \"u4\": { \"id\": \"u4\", \"partner\": [\"id3\", \"id9\"], \"children\": [\"id10\"] },\n        \"u5\": { \"id\": \"u5\", \"partner\": [\"id8\"], \"children\": [\"id12\"] },\n    },\n    \"links\": [\n        [\"id1\", \"u1\"],\n        [\"id2\", \"u1\"],\n        [\"u1\", \"id3\"],\n        [\"u1\", \"id4\"],\n        [\"id6\", \"u2\"],\n        [\"id7\", \"u2\"],\n        [\"u2\", \"id5\"],\n        [\"id3\", \"u3\"],\n        [\"id5\", \"u3\"],\n        [\"u3\", \"id8\"],\n        [\"id3\", \"u4\"],\n        [\"id9\", \"u4\"],\n        [\"u4\", \"id10\"],\n        [\"u1\", \"id11\"],\n        [\"id8\", \"u5\"],\n        [\"u5\", \"id12\"],\n    ]\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenportner%2Fjs_family_tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenportner%2Fjs_family_tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenportner%2Fjs_family_tree/lists"}