{"id":13422521,"url":"https://github.com/react-d3-library/react-d3-library","last_synced_at":"2025-05-15T03:06:09.348Z","repository":{"id":40775648,"uuid":"58166186","full_name":"react-d3-library/react-d3-library","owner":"react-d3-library","description":"Open source library for using D3 in React","archived":false,"fork":false,"pushed_at":"2021-03-04T22:07:06.000Z","size":3068,"stargazers_count":1545,"open_issues_count":22,"forks_count":81,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-05-14T15:17:25.958Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://react-d3-library.github.io/","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/react-d3-library.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":"2016-05-05T23:08:31.000Z","updated_at":"2025-05-14T02:52:28.000Z","dependencies_parsed_at":"2022-07-10T02:00:36.610Z","dependency_job_id":null,"html_url":"https://github.com/react-d3-library/react-d3-library","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-d3-library%2Freact-d3-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-d3-library%2Freact-d3-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-d3-library%2Freact-d3-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-d3-library%2Freact-d3-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-d3-library","download_url":"https://codeload.github.com/react-d3-library/react-d3-library/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254170140,"owners_count":22026223,"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":[],"created_at":"2024-07-30T23:00:46.999Z","updated_at":"2025-05-15T03:06:09.330Z","avatar_url":"https://github.com/react-d3-library.png","language":"JavaScript","funding_links":[],"categories":["Utilities","Uncategorized","JavaScript","Charts"],"sub_categories":["Framework bindings / integrations","Uncategorized"],"readme":"*Please note this repo is no longer maintained\n\n## react-d3-library\nAn open source library that will allow developers the ability to reroute D3 output to React’s virtual DOM. Just use your existing D3 code, and with a few simples lines, you can now harness the power of React with the flexibility of D3! React-D3-Library will compile your code into React components, and it also comes with a series of D3 template charts converted to React components for developers who are unfamiliar with D3. Not only do we build fully functional React components, but they utilize the power of D3 to automate scaling ranges, normalizing data, and constructing legends.\n\n![Voronoi](http://i.imgur.com/zwSsPTS.gif) \n\n### Version\n[![npm version](https://badge.fury.io/js/react-d3-library.png)](https://www.npmjs.com/package/react-d3-library)\n\n### Installing\n\nFirst off, install with:\n\n`npm install --save react-d3-library`\n\nNext, import into your React project:\n\n```javascript\nconst rd3 = require('react-d3-library');\n```\n\nor \n\n```javascript\nimport rd3 from 'react-d3-library'\n```\n### Wiki\n\nIf you are using D3 Code that only produces static content, or any functionality you have is embedded in event listeners, check out these two links for instructions:\n\n[D3 Code](https://github.com/react-d3-library/react-d3-library/wiki/D3-Code)\n[React Code](https://github.com/react-d3-library/react-d3-library/wiki/React-Code)\n\nIf you do have functionality that should trigger on load(transitions, animations, timers) and/or you are using canvas tags you also need to follow these instructions:\n\n[Functionality](https://github.com/react-d3-library/react-d3-library/wiki/Functionality)\n\nIf you are using D3 timers and want to be sure to prevent memory leaks take a look at this:\n\n[Timers](https://github.com/react-d3-library/react-d3-library/wiki/Timers)\n\nIf you just want some easy to use graphs and charts without writing your own D3 code, checkout our template libaray:\n\n[Templates](https://github.com/react-d3-library/react-d3-library/wiki/Templates)\n\n### Use With Existing D3 Code\n\nDevelopers can now take their existing D3 code and use React-D3-Library to create React components.\nBelow is an excerpt of using D3 to create a Bubble Chart with Mike Bostock's D3 code found [here](https://bl.ocks.org/mbostock/4063269).\n\n![BubbleChart](http://i.imgur.com/iBumKRW.png)\n\n```javascript\nvar diameter = 960,\n    format = d3.format(\",d\"),\n    color = d3.scale.category20c();\n\nvar bubble = d3.layout.pack()\n    .sort(null)\n    .size([diameter, diameter])\n    .padding(1.5);\n\nvar svg = d3.select('body').append(\"svg\")\n    .attr(\"width\", diameter)\n    .attr(\"height\", diameter)\n    .attr(\"class\", \"bubble\");\n\nd3.json(\"flare.json\", function(error, root) {\n  if (error) throw error;\n\nvar bubbles = svg.selectAll(\".node\")\n    .data(bubble.nodes(classes(flare))\n    .filter(function(d) { return !d.children; }))\n    .enter().append(\"g\")\n    .attr(\"class\", \"node\")\n    .attr(\"transform\", function(d) { return \"translate(\" + d.x + \",\" + d.y + \")\"; });\n\n//etc...\n```\n\nWe need to create a `div` element for D3 to build upon before\nconverting it to a React component,\n\n`var node = document.createElement('div');`\n\nand this **`node`** is what we will have D3 select.\n\nWe change the selection from \n```javascript\nd3.select('body')\n```\nto our new **`node`** variable.\n```javascript\nd3.select(node)\n```\n\nThis is what the new code should look like:\n\n```javascript\nvar node = document.createElement('div');\n\nvar diameter = 960,\n    format = d3.format(\",d\"),\n    color = d3.scale.category20c();\n\nvar bubble = d3.layout.pack()\n    .sort(null)\n    .size([diameter, diameter])\n    .padding(1.5);\n    \nvar svg = d3.select(node).append(\"svg\")\n    .attr(\"width\", diameter)\n    .attr(\"height\", diameter)\n    .attr(\"class\", \"bubble\");\n\nd3.json(\"flare.json\", function(error, root) {\n  if (error) throw error;\n\nvar bubbles = svg.selectAll(\".node\")\n    .data(bubble.nodes(classes(flare))\n    .filter(function(d) { return !d.children; }))\n    .enter().append(\"g\")\n    .attr(\"class\", \"node\")\n    .attr(\"transform\", function(d) { return \"translate(\" + d.x + \",\" + d.y + \")\"; });\n\n//etc...\n```\n\nJust one more step and you are ready to convert everything to React!\n\nUse the `componentDidMount()` React lifecycle method to make the state aware of your new D3 **`node`**. \n\nThen pass the state as props to the react-d3-library Component `rd3.Component`.\n\n```javascript\nimport rd3 from 'react-d3-library';\nimport node from 'd3file';\nconst RD3Component = rd3.Component;\n\nclass my_First_React_D3_Library_Component extends React.Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {d3: ''}\n  }\n\n  componentDidMount() {\n    this.setState({d3: node});\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cRD3Component data={this.state.d3} /\u003e\n      \u003c/div\u003e\n    )\n  }\n};\n```\nAnd that's it!! Good Job!!\n\n\nSimple chart components are also available under the `rd3` namespace as shown below\n\n### Available Charts\n\n```\nconst ScatterPlot = rd3.ScatterPlot;\nconst PieChart = rd3.PieChart;\nconst LineChart = rd3.LineChart;\nconst AreaChart = rd3.AreaChart;\nconst BarChart = rd3.BarChart;\n```\n\nCheck out the Wiki to see more about using our [template](https://github.com/react-d3-library/react-d3-library/wiki/Templates) components.\n\n**Due to the recent large influx of emails we have been getting, please note we do plan on releasing more highly available template charts along with accessible D3 and unit tests for open source contributors to help.  \n\n### License\nMIT\n\nBecause this is an open source project, we are constantly evaluating feedback and continuing to improve upon the content.\n\nCopyright (c) 2016 Andrew Burke, Danny Lee, Dave Loyst [contributors](https://github.com/orgs/react-d3-library/people)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-d3-library%2Freact-d3-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-d3-library%2Freact-d3-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-d3-library%2Freact-d3-library/lists"}