{"id":13563258,"url":"https://github.com/danielcaldas/react-d3-graph","last_synced_at":"2025-05-14T14:07:45.782Z","repository":{"id":20299643,"uuid":"86629510","full_name":"danielcaldas/react-d3-graph","owner":"danielcaldas","description":"Interactive and configurable graphs with react and d3 effortlessly","archived":false,"fork":false,"pushed_at":"2023-12-11T18:24:49.000Z","size":32491,"stargazers_count":824,"open_issues_count":130,"forks_count":232,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-05-14T03:19:53.273Z","etag":null,"topics":["configurable-software","d3-visualization","d3js","graphs","javascript","network-graph","network-visualization","networks","react","social-network-analysis","social-network-graph","visualization"],"latest_commit_sha":null,"homepage":"https://danielcaldas.github.io/react-d3-graph/sandbox/","language":"JavaScript","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/danielcaldas.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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}},"created_at":"2017-03-29T21:07:12.000Z","updated_at":"2025-05-09T01:12:55.000Z","dependencies_parsed_at":"2024-01-16T18:59:48.657Z","dependency_job_id":"c8692309-d67a-4be7-a855-b4bc88d55ff6","html_url":"https://github.com/danielcaldas/react-d3-graph","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielcaldas%2Freact-d3-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielcaldas%2Freact-d3-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielcaldas%2Freact-d3-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielcaldas%2Freact-d3-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danielcaldas","download_url":"https://codeload.github.com/danielcaldas/react-d3-graph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254103833,"owners_count":22015352,"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":["configurable-software","d3-visualization","d3js","graphs","javascript","network-graph","network-visualization","networks","react","social-network-analysis","social-network-graph","visualization"],"created_at":"2024-08-01T13:01:16.947Z","updated_at":"2025-05-14T14:07:45.753Z","avatar_url":"https://github.com/danielcaldas.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-d3-graph \u0026middot; [![Build Status](https://github.com/danielcaldas/react-d3-graph/workflows/react-d3-graph/badge.svg)](https://github.com/danielcaldas/react-d3-graph/workflows/react-d3-graph/badge.svg)\n\n[![npm version](https://img.shields.io/npm/v/react-d3-graph.svg?style=flat-square)](https://www.npmjs.com/package/react-d3-graph) [![npm](https://img.shields.io/npm/dw/react-d3-graph.svg?style=flat-square)](https://www.npmjs.com/package/react-d3-graph)\n[![npm](https://img.shields.io/npm/dt/react-d3-graph.svg?style=flat-square)](https://www.npmjs.com/package/react-d3-graph) [![probot enabled](https://img.shields.io/badge/probot:stale-enabled-yellow.svg?longCache=true\u0026style=flat-square)](https://probot.github.io/) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\n:book: [Documentation](https://danielcaldas.github.io/react-d3-graph/docs/index.html)\n\n### _Interactive and configurable graphs with react and d3 effortlessly_\n\n[![react-d3-graph gif sample](https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/rd3g_v2.gif?raw=true)](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html)\n\n## Playground\n\n[Here a live playground](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html) page where you can interactively config your own graph, and generate a ready to use configuration! :sunglasses:\n\nYou can also load different data sets and configurations via URL query parameter. Below is a table with all the data sets available in the live sandbox for you to interactively explore different kinds of integrations with the library.\n\n| Name   | Link                                                                                      | Source                     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |\n| :----- | :---------------------------------------------------------------------------------------- | :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| small  | [demo](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=small)       | `sandbox/data/small`       | This is a good example to get you started. It has only 4 nodes. It's good to discuss over integration details and it's also good to report issues that you might found in the library. It's much easier to debug over a tiny graph.                                                                                                                                                                                                                                                                                   |\n| custom | [demo](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=custom-node) | `sandbox/data/custom-node` | In this example you'll be able to see the power of the feature [node.viewGenerator](https://danielcaldas.github.io/react-d3-graph/docs/#node-view-generator) to create highly customizable nodes for you graph that go beyond the simple shapes that come out of the box with the library.                                                                                                                                                                                                                            |\n| marvel | [demo](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel)      | `sandbox/data/marvel`      | In this thematic example you can see how several features such as: [nodeHighlightBehavior](https://danielcaldas.github.io/react-d3-graph/docs/#node-highlight-behavior), [custom SVGs for nodes](https://danielcaldas.github.io/react-d3-graph/docs/#node-svg), [collapsible](https://danielcaldas.github.io/react-d3-graph/docs/#collapsible) etc. come together on top of a directed graph that displays some characters from the Marvel Universe.                                                                  |\n| static | [demo](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=static)      | `sandbox/data/static`      | If your goal is not to have nodes dancing around with the default [d3 forces](https://danielcaldas.github.io/react-d3-graph/docs/#config-d3) that the library provides, you can opt by making your nodes static and positioned them always in the same _(x, y)_ coordinates. To achieve this you can make use of [staticGraphWithDragAndDrop](https://danielcaldas.github.io/react-d3-graph/docs/#static-graph-with-drag-and-drop) or [staticGraph](https://danielcaldas.github.io/react-d3-graph/docs/#static-graph) |\n\nDo you want to visualize your own data set on the live sandbox? Just submit a PR! You're welcome 😁.\n\n## Documentation :book:\n\nFull documentation [here](https://danielcaldas.github.io/react-d3-graph/docs/index.html).\n\n## Install\n\n[![https://nodei.co/npm/YOUR-MODULE-NAME.png?downloads=true\u0026downloadRank=true\u0026stars=true](https://nodei.co/npm/react-d3-graph.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://www.npmjs.com/package/react-d3-graph)\n\n```bash\nnpm install d3@^5.5.0      # if you don't have d3 already\nnpm install react@^16.4.1  # if you don't have react already\n\nnpm install react-d3-graph\n```\n\n#### About react and d3 peer dependencies\n\n**Note** that `react` and `d3` are [peer-dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/), this means that the responsibility to install them is delegated to the client. This will give you more flexibility on what versions of `d3` and `react` you want to consume, you just need to make sure that you are compliant with the range of versions that `react-d3-graph` is compatible with. If you install `react-d3-graph` without first installing `d3` and `react` you might see the following warnings:\n\n\u003e npm WARN react-d3-graph@2.0.1 requires a peer of d3@^5.5.0 but none is installed. You must install peer dependencies yourself.\n\u003e npm WARN react-d3-graph@2.0.1 requires a peer of react@^16.4.1 but none is installed. You must install peer dependencies yourself.\n\n## Minimal usage example\n\nGraph component is the main component for react-d3-graph components, its interface allows its user to build the graph once the user provides the data, configuration (optional) and callback interactions (also optional).\nThe code for the [live example](https://danielcaldas.github.io/react-d3-graph/sandbox/index.html) can be consulted [here](https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/Sandbox.jsx).\n\n```javascript\nimport { Graph } from \"react-d3-graph\";\n\n// graph payload (with minimalist structure)\nconst data = {\n  nodes: [{ id: \"Harry\" }, { id: \"Sally\" }, { id: \"Alice\" }],\n  links: [\n    { source: \"Harry\", target: \"Sally\" },\n    { source: \"Harry\", target: \"Alice\" },\n  ],\n};\n\n// the graph configuration, just override the ones you need\nconst myConfig = {\n  nodeHighlightBehavior: true,\n  node: {\n    color: \"lightgreen\",\n    size: 120,\n    highlightStrokeColor: \"blue\",\n  },\n  link: {\n    highlightColor: \"lightblue\",\n  },\n};\n\nconst onClickNode = function(nodeId) {\n  window.alert(`Clicked node ${nodeId}`);\n};\n\nconst onClickLink = function(source, target) {\n  window.alert(`Clicked link between ${source} and ${target}`);\n};\n\n\u003cGraph\n  id=\"graph-id\" // id is mandatory\n  data={data}\n  config={myConfig}\n  onClickNode={onClickNode}\n  onClickLink={onClickLink}\n/\u003e;\n```\n\nFor more advanced use cases check [the official documentation](https://danielcaldas.github.io/react-d3-graph/docs/index.html).\n\n## Core Team\n\nThe group of maintainers driving the project.\n\n| [Daniel Caldas](https://github.com/danielcaldas)                                                                        | [Sara Hernández](https://github.com/LonelyPrincess)                                                                       | [Terahn Harrison](https://github.com/terahn)                                                                      | [Antonin Klopp-Tosser](https://github.com/antoninklopp)                                                            |\n| ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |\n| ![danielcaldas](https://avatars2.githubusercontent.com/u/11733994?s=120\u0026u=e6b6edacde9c76844785e21d0568a4ba7c7f9aa4\u0026v=4) | ![LonelyPrincess](https://avatars3.githubusercontent.com/u/17673317?s=120\u0026u=d3170de2d3d4adf6268b892213927c8439d2f513\u0026v=4) | ![terahn](https://avatars2.githubusercontent.com/u/23760949?s=120\u0026u=9182d8d602285c507a1e88a0629785323b2f8703\u0026v=4) | ![antonin](https://avatars2.githubusercontent.com/u/26838971?s=120\u0026u=e3767df46ed6d7ef40d95562450d96a6bac5c437\u0026v=4) |\n| [@\\_danielcaldas](https://twitter.com/_danielcaldas)                                                                    |                                                                                                                           |                                                                                                                   |                                                                                                                    |\n\n## Contributions\n\nContributions are welcome, feel free to submit new ideas/features, just go ahead and open an issue. If you are more a _hands on_ person, just submit a pull request. Before jumping into coding, please take a look at the contribution guidelines [CONTRIBUTING.md](https://github.com/danielcaldas/react-d3-graph/blob/master/CONTRIBUTING.md).\n\nTo run react-d3-graph in development mode you just need to run `npm run dev` and the interactive sandbox will reload with the changes to the library code, that way you can test your changes not only through unit test but also through a real life example. It's that simple. The development workflow usually should follow the steps:\n\n- Create a branch prefixed with `fix/` for bug fixes, `feature/` for new features, `chore/` or `refactor/` for refactoring or tooling and CI/CD related tasks.\n- Make sure you are up to date running `npm install`.\n- Run `npm run dev`.\n- Make you changes inside the folder `src` and the interactive sandbox consumes your changes in real time\n  with webpack-dev-server.\n- You can run tests locally with `npm run test` (for unit tests) or `npm run functional:local` for e2e tests.\n- After you're done, open the Pull Request and describe the changes you've made.\n\n## Alternatives (Not what you where looking for?)\n\nWell if you scrolled this far maybe _react-d3-graph_ does not fulfill all your requirements 😭, but don't worry I got you covered! There are a lot of different and good alternatives out there, [here is a list with a few alternatives](http://anvaka.github.io/graph-drawing-libraries/#!/all#%2Fall).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielcaldas%2Freact-d3-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanielcaldas%2Freact-d3-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielcaldas%2Freact-d3-graph/lists"}