{"id":13481126,"url":"https://github.com/erikbrinkman/d3-dag","last_synced_at":"2025-05-13T20:12:22.583Z","repository":{"id":43178851,"uuid":"139928906","full_name":"erikbrinkman/d3-dag","owner":"erikbrinkman","description":"Layout algorithms for visualizing directed acyclic graphs","archived":false,"fork":false,"pushed_at":"2025-04-06T17:00:25.000Z","size":15784,"stargazers_count":1475,"open_issues_count":3,"forks_count":90,"subscribers_count":34,"default_branch":"main","last_synced_at":"2025-04-28T10:56:00.596Z","etag":null,"topics":["d3","graph","typescript"],"latest_commit_sha":null,"homepage":"https://erikbrinkman.github.io/d3-dag/","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/erikbrinkman.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-07-06T03:31:09.000Z","updated_at":"2025-04-25T08:17:31.000Z","dependencies_parsed_at":"2024-09-21T06:30:47.104Z","dependency_job_id":"51959b75-6a11-4b28-a102-476fd91fc5dc","html_url":"https://github.com/erikbrinkman/d3-dag","commit_stats":{"total_commits":342,"total_committers":12,"mean_commits":28.5,"dds":"0.11403508771929827","last_synced_commit":"0189460d8ba77d8243b21033e586cdeed7971cb5"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikbrinkman%2Fd3-dag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikbrinkman%2Fd3-dag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikbrinkman%2Fd3-dag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikbrinkman%2Fd3-dag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erikbrinkman","download_url":"https://codeload.github.com/erikbrinkman/d3-dag/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254020615,"owners_count":22000755,"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","graph","typescript"],"created_at":"2024-07-31T17:00:48.932Z","updated_at":"2025-05-13T20:12:22.538Z","avatar_url":"https://github.com/erikbrinkman.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Charts"],"sub_categories":[],"readme":"# d3-dag\n\n[![npm](https://img.shields.io/npm/v/d3-dag.svg)](https://www.npmjs.com/package/d3-dag)\n[![build](https://github.com/erikbrinkman/d3-dag/workflows/build/badge.svg)](https://github.com/erikbrinkman/d3-dag/actions)\n[![docs](https://img.shields.io/badge/docs-docs-informational)](https://erikbrinkman.github.io/d3-dag/modules.html)\n\nOften data sets are hierarchical, but are not in a tree structure, such as genetic data.\nIn these instances `d3-hierarchy` may not suit your needs, which is why `d3-dag` (Directed Acyclic Graph) exists.\nThis module implements a data structure for manipulating DAGs.\nOld versions were designed to mimic `d3-hierarchy`'s api as much as possible, newer versions have opted to use modern javascript conventions while breaking from the standard set by d3.\n\n## Examples\n\n- **Sugiyama** [[codepen](https://codepen.io/brinkbot/pen/oNQwNRv)] [[observable](https://observablehq.com/@erikbrinkman/d3-dag-sugiyama)] [[api](https://erikbrinkman.github.io/d3-dag/functions/sugiyama-1.html)] - a robust layered layout\n- **Zherebko** [[codepen](https://codepen.io/brinkbot/pen/dyQRPMY)] [[observable](https://observablehq.com/d/9ce02b308bb2b138)] [[api](https://erikbrinkman.github.io/d3-dag/functions/zherebko-1.html)] - a linear topological layout\n- **Grid** [[codepen](https://codepen.io/brinkbot/pen/eYQRmzx)] [[observable](https://observablehq.com/@erikbrinkman/d3-dag-topological)] [[api](https://erikbrinkman.github.io/d3-dag/functions/grid-1.html)] - a grid based topological layout\n- **Dynamic** [[codepen](https://codepen.io/brinkbot/pen/dyQRPpG)] - a dynamic sugiyama layout, click on nodes to activate or deactivate them\n\n## Status\n\n\u003e :warning: **tl;dr** this is effectively in light maintanence mode: simple feature requests may still be implemented, but I won't be trying to expand to new use cases\n\nThis project started years ago with the intention of providing a rough\nframework for implementing or extending a sugiyama-style layout for small to\nmedium sized static DAGs. At the time, this was one of the only libraries to\nsupport layered graph layouts in javascript. Since then many more libraries\nexist, and since I no longer use it, it's been hard to actively develop.\n\nIn addition, I started this mostly for experimentation purposes, but most\npeople just want something reasonable out of the box, that works for most\ninputs. Fully supporting that would take a different library, but fortunately\nthere are several: (Note this list may not be up to date, but PRs are welcome)\n\n- [react flow](https://reactflow.dev/) - an interactive flow chart react library.\n  This focuses more interaction than layout, and has many more included features,\n  but for people starting out, it might provide much more for free.\n- [graphology](https://www.npmjs.com/package/graphology) - a general javascript\n  graph library that's similar to the graph implementation provided as part of\n  this library.\n- [sigma](https://www.npmjs.com/package/sigma) - a graph layout library\n  specifically targeted at large graphs.\n\n## Installing\n\nIf you use node, `npm i d3-dag` or `yarn add d3-dag`.\nOtherwise you can load it using `unpkg`:\n\n```html\n\u003cscript src=\"https://unpkg.com/d3-dag@1.1.0\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nconst dag = d3.graphStratify(...);\nconst layout = d3.sugiyama();\nlayout(dag);\n\n// ... actually render here ...\nfor (const node of dag.nodes()) {\n  console.log(node.x, node.y);\n}\nfor (const { points } of dag.links()) {\n  console.log(points);\n}\n\n\u003c/script\u003e\n```\n\n## General Usage Notes\n\nThis library is built around the concept of operators.\nOperators are functions with a fluent interface to modify their behavior.\nEvery function that modifies behavior returns a copy, and will not modify the original operator.\nFor example, the `stratify` operator creates dags from id-based parent data, can be used like so:\n\n```ts\n// note initial function call with no arguments to create default operator\nconst stratify = graphStratify();\nconst dag = stratify([{ id: \"parent\" }, { id: \"child\", parentIds: [\"parent\"] }]);\n\nstratify.id(({ myid }: { myid: string }) =\u003e myid);\n// doesn't work, stratify was not modified\nconst dag = stratify([{ myid: \"parent\" }, { myid: \"child\", parentIds: [\"parent\"] }]);\n\nconst myStratify = stratify.id(({ myid }: { myid: string }) =\u003e myid);\n// works!\nconst dag = myStratify([{ myid: \"parent\" }, { myid: \"child\", parentIds: [\"parent\"] }]);\n```\n\n## Updating\n\nFor information about changes between releases see the [`changelog`](CHANGELOG.md).\n\n## Contributing\n\nContributions, issues, and PRs are all welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferikbrinkman%2Fd3-dag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferikbrinkman%2Fd3-dag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferikbrinkman%2Fd3-dag/lists"}