{"id":13450524,"url":"https://github.com/inokawa/react-use-d3","last_synced_at":"2025-03-23T16:31:37.321Z","repository":{"id":46233159,"uuid":"305363964","full_name":"inokawa/react-use-d3","owner":"inokawa","description":"A small React hook to use D3 in declarative way, for data visualization \u0026 flexible animation.","archived":true,"fork":false,"pushed_at":"2022-06-14T14:51:13.000Z","size":5117,"stargazers_count":7,"open_issues_count":9,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-25T11:43:05.162Z","etag":null,"topics":["animation","css","d3","hooks","react","svg","transition","visualization"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-use-d3","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/inokawa.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}},"created_at":"2020-10-19T11:39:38.000Z","updated_at":"2023-01-27T23:54:45.000Z","dependencies_parsed_at":"2022-07-26T01:02:51.025Z","dependency_job_id":null,"html_url":"https://github.com/inokawa/react-use-d3","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inokawa%2Freact-use-d3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inokawa%2Freact-use-d3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inokawa%2Freact-use-d3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inokawa%2Freact-use-d3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inokawa","download_url":"https://codeload.github.com/inokawa/react-use-d3/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221856413,"owners_count":16892439,"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":["animation","css","d3","hooks","react","svg","transition","visualization"],"created_at":"2024-07-31T07:00:35.646Z","updated_at":"2024-10-28T16:31:22.272Z","avatar_url":"https://github.com/inokawa.png","language":"TypeScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# react-use-d3\n\n![npm](https://img.shields.io/npm/v/react-use-d3) ![check](https://github.com/inokawa/react-use-d3/workflows/check/badge.svg) ![demo](https://github.com/inokawa/react-use-d3/workflows/demo/badge.svg)\n\nA small [React](https://github.com/facebook/react) hook to use [D3](https://github.com/d3/d3) in declarative way, for data visualization \u0026 flexible animation.\n\n\u003e **NOTE: I recommend to use my new library https://github.com/inokawa/react-animatable**\n\n**This is under development and APIs are not fixed**\n\n## Why?\n\nD3 is an excellent library to do data-driven visualization.\nReact is a nice library to create user interfaces in data-driven way.\nSo why not use them together?\n\nWell, integrating D3 into React was tried by many. Someone uses a part of D3's possibilities in React but it looks that no one succeeded to port all of them. I think it's because of mismatches between D3 and React.\n\n- React does DOM manipulation through virtual DOM but D3 does it directly with its own data binding system.\n- React is only for UI but D3 has everything for visualization.\n- React uses JSX but D3 doesn't (React's hook feels similar to D3 way in my opinion).\n- React's reconciliation misses some values interpolated by D3.\n\nI'm trying to give a nice intermediate with this lib.\nAlmost all syntaxes of D3 would work.\nThe elements created with D3 are transformed into React Elements and handled by React's reconciliation.\nAttribute updates are applied directly through [ref](https://reactjs.org/docs/refs-and-the-dom.html) for smooth animation.\n\nThe core of this lib is based on [react-faux-dom](https://github.com/Olical/react-faux-dom), but highly customized to fit to the lifecycle of React and handle D3's transition correctly. Also rewritten in TypeScript and fixed to support newest D3.\n\nI'm trying to support D3's usecases as much as possible. If you notice some problems, I would appreciate if you could report it in a [issue](https://github.com/inokawa/react-use-d3/issues).\n\n## Demo\n\nhttps://inokawa.github.io/react-use-d3/\n\n## Install\n\n```sh\nnpm install react-use-d3\n```\n\n### Requirements\n\n- react \u003e= 16.8\n- d3 \u003e= 4\n\n## Usage\n\n```jsx\nimport * as d3 from \"d3\";\nimport { useD3 } from \"react-use-d3\";\n\nexport const Component = ({ width, height, data }) =\u003e {\n  const svg = useD3(\n    (create) =\u003e {\n      // create('foo') inits virtual element which accepts D3's mutations\n      const svg = d3\n        .select(create(\"svg\"))\n        .attr(\"width\", width)\n        .attr(\"height\", height);\n      svg\n        .append(\"text\")\n        .attr(\"x\", width / 2)\n        .attr(\"y\", height / 2)\n        .attr(\"fill\", \"black\")\n        .text(data);\n      return svg;\n    },\n    // deps of useD3 hook\n    // useD3 hook runs if some of deps are updated like useMemo / useEffect\n    [width, height, data]\n  );\n  // el.toReact() transforms virtual element into React element\n  return \u003cdiv\u003e{svg.node().toReact()}\u003c/div\u003e;\n};\n```\n\n## Limitations\n\nTODO\n\n## TODOs\n\n- [ ] Fix API\n- [ ] Confirm that it works with...\n  - [x] d3-selection\n  - [x] d3-transition\n  - [x] d3-scale\n  - [x] d3-interpolate\n  - [ ] d3-hierarchy\n  - [ ] d3-shape\n  - [ ] d3-path\n  - [ ] d3-chord\n  - [ ] d3-axis\n  - [x] d3-drag\n  - [ ] d3-brush\n  - [ ] d3-zoom\n  - [x] d3-force\n  - [ ] d3-contour\n  - [ ] d3-geo\n  - [ ] d3-tile\n  - [ ] d3-quadtree\n  - [ ] d3-delaunay\n  - [ ] d3-dag\n  - etc.\n- [ ] Support canvas\n- [ ] Support React Native\n- [ ] Consider examples\n- [ ] Consider dependencies\n- [ ] Consider tests\n\n## Inspirations\n\n- [react-faux-dom](https://github.com/Olical/react-faux-dom)\n- [react-d3-library](https://github.com/react-d3-library/react-d3-library)\n- [d3-render](https://github.com/unkleho/d3-render)\n- [react-spring](https://github.com/pmndrs/react-spring)\n- [resonance](https://github.com/sghall/resonance)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finokawa%2Freact-use-d3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finokawa%2Freact-use-d3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finokawa%2Freact-use-d3/lists"}