{"id":22403359,"url":"https://github.com/springload/react-d3-integration","last_synced_at":"2025-07-31T16:31:58.964Z","repository":{"id":32811211,"uuid":"36403939","full_name":"springload/react-d3-integration","owner":"springload","description":"An example on how to integrate D3 into React","archived":false,"fork":false,"pushed_at":"2016-10-10T19:55:16.000Z","size":1076,"stargazers_count":14,"open_issues_count":0,"forks_count":2,"subscribers_count":37,"default_branch":"master","last_synced_at":"2024-04-16T06:38:44.132Z","etag":null,"topics":["d3","dataviz","react"],"latest_commit_sha":null,"homepage":"https://springload.github.io/react-d3-integration/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/springload.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-28T00:15:45.000Z","updated_at":"2019-04-08T06:16:02.000Z","dependencies_parsed_at":"2022-09-12T00:51:38.874Z","dependency_job_id":null,"html_url":"https://github.com/springload/react-d3-integration","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/springload%2Freact-d3-integration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Freact-d3-integration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Freact-d3-integration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Freact-d3-integration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/springload","download_url":"https://codeload.github.com/springload/react-d3-integration/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228267806,"owners_count":17893841,"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","dataviz","react"],"created_at":"2024-12-05T09:16:55.337Z","updated_at":"2024-12-05T09:16:56.108Z","avatar_url":"https://github.com/springload.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[react-d3-integration](https://springload.github.io/react-d3-integration/) [![Build Status](https://travis-ci.org/springload/react-d3-integration.svg?branch=master)](https://travis-ci.org/springload/react-d3-integration)\n==============\n\n\u003e An example on how to integrate D3 into React.\n\n\u003e[Basic demo](https://springload.github.io/react-d3-integration/) – [Bigger demo in our `reusable-d3-charts` showcase](https://springload.github.io/reusable-d3-charts/)\n\n## Why\n\nThis approach is inspired by a [blog post from Nicolas Hery](http://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/). It has also been taken for a spin by [the folks at sift science](http://blog.siftscience.com/blog/2015/4/6/d-threeact-how-sift-science-made-d3-react-besties).\n\nWe find it very suitable to our needs, because it clearly separates concerns between D3 (rendering the chart) and React (managing the data \u0026 lifecycle). If you've never used React, you'll still be able to create a nice chart. If you've never used D3, you won't have to worry about it nor SVG when building your React components.\n\n\u003e Use this approach if you value the ability to use the chart outside of React and idiomatic D3 code over the performance gains you'll have by using React's virtual DOM for SVG.\n\nOther approaches worth having a look at:\n\n- https://ericbullington.com/blog/2014/11/16/react-d3-charts/\n- https://github.com/codesuki/react-d3-components\n- https://github.com/bgrsquared/d3-react-squared\n\n## Installation\n\n```sh\ngit clone git@github.com:springload/react-d3-integration.git\ncd react-d3-integration\nnvm install\nnpm install\n```\n\n## Working on the project\n\n\u003e Everything mentioned in the installation process should already be done.\n\n```sh\n# Use the right node version\nnvm use\n# Start the server and the development tools.\nnpm run start\n# Builds frontend assets for production.\nnpm run build\n# Runs tests.\nnpm run test\n```\n\n## Deploying the project\n\n```sh\n# First make sure your master is up to date.\ncd react-d3-integration\ngit fetch --all\ngit checkout master\ngit pull\ngit push origin master\n# Then build the project\nnpm run build\n# Follow the instructions in the build command\ngit commit -am \"Save local changes\"\ngit checkout -B gh-pages\ngit add -f build\ngit commit -am \"Rebuild website\"\ngit filter-branch -f --prune-empty --subdirectory-filter build\ngit push -f origin gh-pages\ngit checkout -\n```\n\n## Case studies\n\n### [Disc](http://hughsk.io/disc/)\n\n```sh\nnpm install -g disc\ndiscify public/bundle.js \u003e disc-report.html\n# Voilà! Open the file in your browser.\n```\n\nHere's an [example report](https://springload.github.io/react-d3-integration/disc-report.html) for this repository.\n\n### [sitespeed.io](https://github.com/sitespeedio/sitespeed.io)\n\n```sh\nnpm install -g sitespeed.io\nsitespeed.io -u https://springload.github.io/react-d3-integration/\n# You can now open the report that has been generated in sitespeed-result/.\n```\n\nThis is an [example report](https://springload.github.io/react-d3-integration/sitespeed-result/springload.github.io/2015-07-27-12-38-44/) for this repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringload%2Freact-d3-integration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspringload%2Freact-d3-integration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringload%2Freact-d3-integration/lists"}