d3-react-experiments

Introduction

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 Recharts based charts 🆕
• Some basic and advanced Victory based charts
• Some vanilla d3 components based charts
• Some react-faux-dom based component charts
• Some d3act based charts
• Unit tests with Jest

Some blog posts I wrote about this project:

• D3 React Components with Victory – Reusability / Composability
• Plain d3 code and React working together

What's new from v2 ?

• Upgraded to webpack2
• Setup react-hot-loader@3
• Upgraded to latest eslint + latest eslint-config-airbnb

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).

Setup

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

Install

git clone https://github.com/topheman/d3-react-experiments.git
cd d3-react-experiments
yarn

Run

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

Build

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

Linter

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)

Tests

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.

Resources

• http://stackoverflow.com/research/developer-survey-2015
• http://www.census.gov/: I wrote a little routine to process the csv
• ourworldindata.org
• npm registry
• topheman/webpack-babel-starter