An example on how to integrate D3 into React
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
sitespeed-result/springload.github.io/2015-07-27-12-38-44
src
.editorconfig
.gitignore
.nvmrc
.travis.yml
README.md
disc-report.html
package.json

README.md

react-d3-integration Build Status

An example on how to integrate D3 into React.

Basic demo – Bigger demo in our reusable-d3-charts showcase

Why

This approach is inspired by a blog post from Nicolas Hery. It has also been taken for a spin by the folks at sift science.

We find it very suitable to our needs, because it clearly separates concerns between D3 (rendering the chart) and React (managing the data & 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.

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.

Other approaches worth having a look at:

Installation

git clone git@github.com:springload/react-d3-integration.git
cd react-d3-integration
nvm install
npm install

Working on the project

Everything mentioned in the installation process should already be done.

# Use the right node version
nvm use
# Start the server and the development tools.
npm run start
# Builds frontend assets for production.
npm run build
# Runs tests.
npm run test

Deploying the project

# First make sure your master is up to date.
cd react-d3-integration
git fetch --all
git checkout master
git pull
git push origin master
# Then build the project
npm run build
# Follow the instructions in the build command
git commit -am "Save local changes"
git checkout -B gh-pages
git add -f build
git commit -am "Rebuild website"
git filter-branch -f --prune-empty --subdirectory-filter build
git push -f origin gh-pages
git checkout -

Case studies

Disc

npm install -g disc
discify public/bundle.js > disc-report.html
# Voilà! Open the file in your browser.

Here's an example report for this repository.

sitespeed.io

npm install -g sitespeed.io
sitespeed.io -u https://springload.github.io/react-d3-integration/
# You can now open the report that has been generated in sitespeed-result/.

This is an example report for this repository.