Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Build Status Release


As I explain bellow, there are multiple approaches to handle d3 with React. The goal of this repo is to explore them and provide examples:

  • to test those different approaches
  • to help others choose the one that fit their needs

What will you find in that project ?

Some blog posts I wrote about this project:

What's new from v2 ?

This is still a work in progress, more examples / blog posts will come ...

React & D3

D3 (data driven documents) is a JavaScript library that helps you build visualisations. It is very powerfull (most of the JavaScript datavisualization libraries are based on it). It handles the data you pass it and mutates the DOM.

With React, on the other hand, you never access directly the DOM and let it manage the changes as well as the events.

So, by default, the two of them don't really get along ... d3 messes up with React's reconciliation and React removes what d3 is appending to the DOM ...

In the last year a lot of projects have risen with the goal to make those two work gently together, but there isn't a clear winner yet.

There are two main approaches, both of them using d3 for the processing:

  • blackbox d3 and let it do the render without messing up with React lifecyle
  • reimplement the job done by d3 on the DOM by letting React do the render (wrapping svg inside jsx)

Both approaches have their pros and cons (I won't talk about that here - people with more experience in that field than me have written posts on that).


This project now follows the same development workflow as the one explained in topheman/webpack-babel-starter (the v2 using webpack 2).


git clone
cd d3-react-experiments


From localhost

npm start

From your network ip

Useful to access the website via wifi from other devices such as smartphones.

LOCALHOST=false npm start


At the root of the project :

  • npm run build: for debug (like in dev - with sourceMaps and all)
  • npm run build-prod: for production (minified/optimized ...)
  • npm run build-prod-all: both at once in the same build (with sourcemaps on dev version)

A /build/dist folder will be created with your project built in it.

You can run it with npm run serve-build


I'm using eslint, based on eslint-config-airbnb, a preset for .eslintrc configuration. For more infos, checkout the release it was implemented: react-es6-redux@2.5.0.

  • npm run lint: single run linting of /src & /test folders
  • npm run lint-watch: same in watch mode

You can disable the linter by LINTER=false npm start (though it will still be run a pre-commit hook)


This project is unit tested using the Jest framework:

  • To run those tests: npm test
  • To run those tests in watch mode: npm run jest-watch
  • To update snapshots: npm run jest -- -u

Those unit tests are run each time you commit and will be run on travis-ci when you'll push.