8 |
9 | ### Introduction
10 |
11 | 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:
12 |
13 | * to test those different approaches
14 | * to help others choose the one that fit their needs
15 |
16 | What will you find in that project ?
17 |
18 | * Some [Recharts](https://topheman.github.io/d3-react-experiments/#/recharts/transition-multi-line-chart) based charts 🆕
19 | * Some [basic](https://topheman.github.io/d3-react-experiments/#/victory/world-population-by-age-range) and [advanced](https://topheman.github.io/d3-react-experiments/#/victory/count-npm-downloads) Victory based charts
20 | * Some [vanilla d3](https://topheman.github.io/d3-react-experiments/#/d3) components based charts
21 | * Some [react-faux-dom based](https://topheman.github.io/d3-react-experiments/#/d3/react-faux-dom) component charts
22 | * Some [d3act](https://topheman.github.io/d3-react-experiments/#/d3act) based charts
23 | * Unit tests with [Jest](#tests)
24 |
25 | Some blog posts I wrote about this project:
26 |
27 | * [D3 React Components with Victory – Reusability / Composability](http://dev.topheman.com/d3-react-components-with-victory-reusability-composability)
28 | * [Plain d3 code and React working together](http://dev.topheman.com/d3-react-chart-components/)
29 |
30 | What's new from v2 ?
31 |
32 | * Upgraded to [webpack2](https://webpack.js.org/)
33 | * Setup [react-hot-loader@3](https://gaearon.github.io/react-hot-loader/getstarted/)
34 | * Upgraded to latest [eslint](http://eslint.org/) + latest [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb)
35 |
36 | [This is still a work in progress](https://topheman.github.io/d3-react-experiments/#/), more examples / blog posts will come ...
37 |
38 | ### React & D3
39 |
40 | [D3 (data driven documents)](http://d3js.org/) 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.
41 |
42 | With [React](https://facebook.github.io/react/index.html), on the other hand, you never access directly the DOM and let it manage the changes as well as the events.
43 |
44 | So, by default, the two of them don't really get along ... d3 messes up with [React's reconciliation](https://facebook.github.io/react/docs/reconciliation.html) and React removes what d3 is appending to the DOM ...
45 |
46 | 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.
47 |
48 | There are two main approaches, both of them using d3 for the processing:
49 |
50 | * blackbox d3 and let it do the render without messing up with React lifecyle
51 | * reimplement the job done by d3 on the DOM by letting React do the render (wrapping svg inside jsx)
52 |
53 | 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).
54 |
55 | ### Setup
56 |
57 | This project now follows the same development workflow as the one explained in [topheman/webpack-babel-starter](https://github.com/topheman/webpack-babel-starter) (the v2 using **webpack 2**).
58 |
59 | #### Install
60 |
61 | ```shell
62 | git clone https://github.com/topheman/d3-react-experiments.git
63 | cd d3-react-experiments
64 | yarn
65 | ```
66 |
67 | #### Run
68 |
69 | ##### From localhost
70 |
71 | `npm start`
72 |
73 | ##### From your network ip
74 |
75 | Useful to access the website via wifi from other devices such as smartphones.
76 |
77 | `LOCALHOST=false npm start`
78 |
79 | #### Build
80 |
81 | At the root of the project :
82 |
83 | * `npm run build`: for debug (like in dev - with sourceMaps and all)
84 | * `npm run build-prod`: for production (minified/optimized ...)
85 | * `npm run build-prod-all`: both at once in the same build (with sourcemaps on dev version)
86 |
87 | A `/build/dist` folder will be created with your project built in it.
88 |
89 | You can run it with `npm run serve-build`
90 |
91 | #### Linter
92 |
93 | I'm using eslint, based on [eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb), a preset for `.eslintrc` configuration. For more infos, checkout the release it was implemented: [react-es6-redux@2.5.0](https://github.com/topheman/react-es6-redux/releases/tag/v2.5.0).
94 |
95 | * `npm run lint`: single run linting of `/src` & `/test` folders
96 | * `npm run lint-watch`: same in watch mode
97 |
98 | You can disable the linter by `LINTER=false npm start` (though it will still be run a pre-commit hook)
99 |
100 | #### Tests
101 |
102 | This project is unit tested using the [Jest](https://facebook.github.io/jest/) framework:
103 |
104 | * To run those tests: `npm test`
105 | * To run those tests in watch mode: `npm run jest-watch`
106 | * To update snapshots: `npm run jest -- -u`
107 |
108 | Those unit tests are run each time you commit and will be run on [travis-ci](https://travis-ci.org/topheman/d3-react-experiments) when you'll push.
109 |
110 | ## Resources
111 |
112 | * [http://stackoverflow.com/research/developer-survey-2015](http://stackoverflow.com/research/developer-survey-2015)
113 | * [http://www.census.gov/](http://www.census.gov/population/international/data/idb/informationGateway.php): I wrote a little routine to process the csv
114 | * [ourworldindata.org](https://ourworldindata.org)
115 | * [npm registry](https://docs.npmjs.com/misc/registry)
116 | * [topheman/webpack-babel-starter](https://github.com/topheman/webpack-babel-starter)
117 |
118 |
--------------------------------------------------------------------------------
/bin/README.dist.template.md:
--------------------------------------------------------------------------------
1 | ## d3-react-experiments - distribution version (gh-pages branch)
2 |
3 | This is the distribution version of [topheman/d3-react-experiments](https://github.com/topheman/d3-react-experiments) - v<%= pkg.version %><% if (urlToCommit !== null) { %> - [#<%= gitRevisionShort %>](<%= urlToCommit %>)<% } %>.
4 |
5 | **Warning**: This is the **generated** code, versionned on the `gh-pages` branch, testable online [here](https://topheman.github.io/d3-react-experiments/). If you wish to see the original source code, switch to the [master branch](https://github.com/topheman/d3-react-experiments).
6 |
7 | ### Infos:
8 |
9 | Those informations are available on the [topheman/webpack-babel-starter](https://github.com/topheman/webpack-babel-starter) project:
10 |
11 | * [How those files where generated (Readme - build section)](https://github.com/topheman/webpack-babel-starter#build)
12 | * [How to deploy your generated version (Wiki - deploy section)](https://github.com/topheman/webpack-babel-starter/wiki#deploy)
13 |
14 | As explained in the [README](https://github.com/topheman/webpack-babel-starter#build), when you `npm run build-prod-all`, two versions will be generated:
15 |
16 | * One at the root (the production version)
17 | * One in the [devtools folder](https://github.com/topheman/d3-react-experiments/tree/gh-pages/devtools), which contains as you'll see sourcemaps and are not minified.
18 |
19 | Test the demo [here](https://topheman.github.io/d3-react-experiments/).
20 |
21 | ------
22 |
23 | You can disable the generation of this file by removing the following line in the `package.json`:
24 |
25 | ```js
26 | "postbuild-prod-all": "npm run generate-dist-readme"
27 | ```
28 |
29 | You can customize the output of this file, the template is located at `bin/README.dist.template.md`.
30 |
--------------------------------------------------------------------------------
/bin/clean-dist.js:
--------------------------------------------------------------------------------
1 | const log = require('npmlog');
2 | log.level = 'silly';
3 | const common = require('../common');
4 |
5 | const ROOT_DIR = common.getRootDir();
6 |
7 | /** run */
8 |
9 | log.info('clean-dist', `Cleaning ...`);
10 | const deleted = require('del').sync([
11 | ROOT_DIR + '/build/dist/*',
12 | ROOT_DIR + '/build/dist/**/*',
13 | ROOT_DIR + '/build/dist/!.git/**/*'
14 | ]);
15 | deleted.forEach(function(e){
16 | console.log(e);
17 | });
18 |
--------------------------------------------------------------------------------
/bin/csv-parse-census.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A little script to turn the csv from http://www.census.gov/population/international/data/idb/informationGateway.php
3 | * to json
4 | *
5 | * To use it just:
6 | * node bin/csv-parse-census.js --source ./resources/census_data_20160104_568ac7b494753.csv --output-dir ./src/resources/fixtures
7 | */
8 |
9 | var parse = require('csv-parse');
10 | var fs = require('fs');
11 | var argv = require('minimist')(process.argv.slice(2));
12 |
13 | if (!argv.source || !argv['output-dir']) {
14 | console.log('--source or --output-dir is missing');
15 | process.exit(1);
16 | }
17 |
18 | var outputExtended = [];
19 | var outputCompressed = {
20 | headers: [],
21 | data: []
22 | };
23 |
24 | // Create the parser
25 | var parser = parse({delimiter: ','});
26 |
27 | // Use the writable stream api
28 | var fileLineNumber = 1;
29 | var headers;
30 | parser.on('readable', function(){
31 | while(record = parser.read()){
32 | if (fileLineNumber === 2) {
33 | headers = record;
34 | outputCompressed.headers = headers;
35 | }
36 | if (fileLineNumber > 2) {
37 | outputExtended.push(record.reduce(function(acc, curr, index) {
38 | var toNumeric = parseFloat(curr);
39 | acc[headers[index]] = isNaN(toNumeric) || headers[index] === 'Age' ? curr : toNumeric;
40 | return acc;
41 | }, {}));
42 | outputCompressed.data.push(record.map(function(curr, index) {
43 | var toNumeric = parseFloat(curr);
44 | return isNaN(toNumeric) || headers[index] === 'Age' ? curr : toNumeric;
45 | }));
46 | }
47 | fileLineNumber++;
48 | }
49 | });
50 |
51 | // Catch any error
52 | parser.on('error', function(err){
53 | console.log(err.message);
54 | });
55 |
56 | // When we are done, test that the parsed output matched what expected
57 | parser.on('finish', function(){
58 | var outputDir = argv['output-dir'].replace(/(\/+)$/,"");// remove trailing slashes
59 | var outputExtendedFile = outputDir + '/census-data-extended.json';
60 | fs.writeFileSync(outputExtendedFile, JSON.stringify(outputExtended));
61 | console.log('Saved at ' + outputExtendedFile);
62 | var outputCompressedFile = outputDir + '/census-data-compressed.json';
63 | fs.writeFileSync(outputCompressedFile, JSON.stringify(outputCompressed));
64 | console.log('Saved at ' + outputCompressedFile);
65 | });
66 |
67 | var input = fs.createReadStream(argv.source);
68 | input.pipe(parser);
69 |
--------------------------------------------------------------------------------
/bin/generate-dist-readme.js:
--------------------------------------------------------------------------------
1 | const log = require('npmlog');
2 | log.level = 'silly';
3 | const fs = require('fs');
4 | const path = require('path');
5 | const common = require('../common');
6 | const _ = {template: require('lodash.template')};
7 | var template;
8 |
9 | const OUTPUT_DIR = './build/dist';
10 |
11 | try {
12 | template = fs.readFileSync(__dirname + '/README.dist.template.md', 'utf8').toString();
13 | }
14 | catch (e) {
15 | log.error('generate-dist-readme', e.message);
16 | process.exit(1);
17 | }
18 |
19 | const infos = common.getInfos();
20 |
21 | template = _.template(template);
22 |
23 | const compiled = template(infos);
24 |
25 | try {
26 | fs.writeFileSync(path.resolve(__dirname, '..', OUTPUT_DIR, 'README.md'), compiled);
27 | log.info('generate-dist-readme', 'Create README.md file for gh-pages at ' + path.resolve(__dirname, '..', OUTPUT_DIR, 'README.md'));
28 | }
29 | catch(e) {
30 | log.error('generate-dist-readme', e.message);
31 | process.exit(1);
32 | }
33 |
--------------------------------------------------------------------------------
/common.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | function getRootDir() {
3 | return __dirname;
4 | }
5 |
6 | function getInfos() {
7 | const gitActive = projectIsGitManaged();
8 | const gitRev = require('git-rev-sync');
9 | const moment = require('moment');
10 | const pkg = require('./package.json');
11 | const infos = {
12 | pkg: pkg,
13 | today: moment(new Date()).format(),
14 | year: new Date().toISOString().substr(0, 4),
15 | gitRevisionShort: gitActive ? gitRev.short() : null,
16 | gitRevisionLong: gitActive ? gitRev.long() : null,
17 | author: (pkg.author && pkg.author.name) ? pkg.author.name : (pkg.author || null),
18 | urlToCommit: null
19 | };
20 | infos.urlToCommit = gitActive ? _getUrlToCommit(pkg, infos.gitRevisionLong) : null;
21 | return infos;
22 | }
23 |
24 | /**
25 | * Called in default mode by webpack (will format it correctly in comments)
26 | * Called in formatted mode by gulp (for html comments)
27 | * @param {String} mode default/formatted
28 | * @returns {String}
29 | */
30 | function getBanner(mode) {
31 | const infos = getInfos();
32 | const compiled = [
33 | infos.pkg.name,
34 | '',
35 | infos.pkg.description,
36 | '',
37 | `@version v${infos.pkg.version} - ${infos.today}`,
38 | (infos.gitRevisionShort !== null ? `@revision #${infos.gitRevisionShort}` : '') + (infos.urlToCommit !== null ? ` - ${infos.urlToCommit}` : ''),
39 | (infos.author !== null ? `@author ${infos.author}` : ''),
40 | `@copyright ${infos.year}(c)` + (infos.author !== null ? ` ${infos.author}` : ''),
41 | (infos.pkg.license ? `@license ${infos.pkg.license}` : ''),
42 | ''
43 | ].join(mode === 'formatted' ? '\n * ' : '\n');
44 | return compiled;
45 | }
46 |
47 | function getBannerHtml() {
48 | return '\n';
49 | }
50 |
51 | function projectIsGitManaged() {
52 | const fs = require('fs');
53 | const path = require('path');
54 | try {
55 | // Query the entry
56 | const stats = fs.lstatSync(path.join(__dirname,'.git'));
57 |
58 | // Is it a directory?
59 | if (stats.isDirectory()) {
60 | return true;
61 | }
62 | return false;
63 | }
64 | catch (e) {
65 | return false;
66 | }
67 | }
68 |
69 | function _getUrlToCommit(pkg, gitRevisionLong){
70 | let urlToCommit = null;
71 | // if no repository return null
72 | if (typeof pkg.repository === 'undefined') {
73 | return urlToCommit;
74 | }
75 | //retrieve and reformat repo url from package.json
76 | if (typeof(pkg.repository) === 'string') {
77 | urlToCommit = pkg.repository;
78 | }
79 | else if (typeof(pkg.repository.url) === 'string') {
80 | urlToCommit = pkg.repository.url;
81 | }
82 | //check that there is a git repo specified in package.json & it is a github one
83 | if (urlToCommit !== null && /^https:\/\/github.com/.test(urlToCommit)) {
84 | urlToCommit = urlToCommit.replace(/.git$/, '/tree/' + gitRevisionLong);//remove the .git at the end
85 | }
86 | return urlToCommit;
87 | }
88 |
89 | module.exports.getRootDir = getRootDir;
90 | module.exports.getInfos = getInfos;
91 | module.exports.getBanner = getBanner;
92 | module.exports.getBannerHtml = getBannerHtml;
93 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "d3-react-experiments",
3 | "version": "3.0.0",
4 | "description": "Mix d3 & react",
5 | "main": "gulpfile.js",
6 | "scripts": {
7 | "test": "npm run lint && npm run jest -- --silent",
8 | "jest-watch": "./node_modules/.bin/jest --watch",
9 | "jest": "./node_modules/.bin/jest",
10 | "start": "DEVTOOLS=true npm run webpack",
11 | "lint": "./node_modules/.bin/eslint src test",
12 | "lint-fix": "./node_modules/.bin/eslint --fix src --ext .js",
13 | "lint-watch": "./node_modules/.bin/esw --watch src test",
14 | "clean-dist": "node ./bin/clean-dist.js",
15 | "serve-build": "echo 'Serving distribution folder build/dist' && npm run serve-dist",
16 | "serve-dist": "./node_modules/.bin/serve build/dist",
17 | "build": "npm run clean-dist && NODE_ENV=production OPTIMIZE=false DEVTOOLS=true npm run webpack-build",
18 | "build-prod": "npm run clean-dist && NODE_ENV=production npm run webpack-build-prod",
19 | "build-prod-all": "DEVTOOLS=false npm run build-prod && NODE_ENV=production OPTIMIZE=false DEVTOOLS=true DIST_DIR=dist/devtools npm run webpack-build",
20 | "postbuild-prod-all": "npm run generate-dist-readme",
21 | "webpack": "./node_modules/.bin/webpack-dev-server --progress --colors --hot --inline",
22 | "webpack-build": "./node_modules/.bin/webpack --progress",
23 | "webpack-build-prod": "./node_modules/.bin/webpack --progress -p",
24 | "generate-dist-readme": "node bin/generate-dist-readme.js",
25 | "generate-fixtures": "node ./bin/csv-parse-census.js --source ./resources/census_data_20160104_568ac7b494753.csv --output-dir ./src/resources/fixtures",
26 | "postinstall": "echo \"If you're using npm2 please upgrade to npm3, see Victory error message. Also don't care about the warning messages about peerDependencies related to builder-victory-component\""
27 | },
28 | "pre-commit": [
29 | "test"
30 | ],
31 | "repository": {
32 | "type": "git",
33 | "url": "https://github.com/topheman/d3-react-experiments.git"
34 | },
35 | "author": "Christophe Rosset",
36 | "license": "MIT",
37 | "devDependencies": {
38 | "babel-core": "^6.5.2",
39 | "babel-eslint": "^7.2.3",
40 | "babel-loader": "^6.2.3",
41 | "babel-plugin-add-module-exports": "^0.1.2",
42 | "babel-plugin-transform-class-properties": "^6.6.0",
43 | "babel-plugin-transform-es2015-destructuring": "^6.6.5",
44 | "babel-plugin-transform-object-rest-spread": "^6.6.5",
45 | "babel-preset-es2015": "^6.5.0",
46 | "babel-preset-react": "^6.5.0",
47 | "css-loader": "^0.28.4",
48 | "csv-parse": "^1.2.0",
49 | "del": "^2.2.0",
50 | "eslint": "^3.x.x",
51 | "eslint-config-airbnb": "^15.0.1",
52 | "eslint-loader": "^1.8.0",
53 | "eslint-plugin-import": "^2.6.0",
54 | "eslint-plugin-jsx-a11y": "^5.0.3",
55 | "eslint-plugin-react": "^7.1.0",
56 | "eslint-watch": "^2.1.4",
57 | "extract-text-webpack-plugin": "^2.1.2",
58 | "file-loader": "^0.11.2",
59 | "git-rev-sync": "^1.4.0",
60 | "html-webpack-plugin": "^2.9.0",
61 | "json-loader": "^0.5.3",
62 | "lodash.template": "^4.2.2",
63 | "minimist": "^1.2.0",
64 | "moment": "^2.11.2",
65 | "my-local-ip": "^1.0.0",
66 | "node-sass": "^4.5.3",
67 | "npmlog": "^2.0.2",
68 | "pre-commit": "^1.1.2",
69 | "react-hot-loader": "next",
70 | "sass-loader": "^6.0.6",
71 | "serve": "^1.4.0",
72 | "style-loader": "^0.18.2",
73 | "url-loader": "^0.5.9",
74 | "webpack": "^2.6.1",
75 | "webpack-dev-server": "^2.4.5"
76 | },
77 | "dependencies": {
78 | "array-includes": "^3.0.2",
79 | "babel-jest": "^19.0.0",
80 | "bootstrap-sass": "^3.3.5",
81 | "color-hash": "^1.0.3",
82 | "d3-array": "^1.0.1",
83 | "d3-axis": "^1.0.3",
84 | "d3-request": "^1.0.2",
85 | "d3-scale": "^1.0.3",
86 | "d3-selection": "^1.0.2",
87 | "d3-shape": "^1.0.3",
88 | "d3-transition": "^1.0.2",
89 | "d3act": "^2.0.0",
90 | "enzyme": "^2.8.0",
91 | "enzyme-to-json": "^1.5.0",
92 | "es6-promise": "^3.0.2",
93 | "jest-cli": "^19.0.2",
94 | "radium": "^0.16.2",
95 | "react": "^15.1.0",
96 | "react-addons-test-utils": "15.3.2",
97 | "react-dom": "15.3.2",
98 | "react-faux-dom": "^3.0.0",
99 | "react-router": "^2.4.1",
100 | "react-scroll": "^1.4.0",
101 | "react-select": "^1.0.0-rc.1",
102 | "recharts": "^0.21.2",
103 | "victory": "^0.12.1"
104 | },
105 | "jest": {
106 | "transform": {
107 | ".*": "Add / Remove any country from the list.
56 |Loading ...
} 79 | {!ready && error &&Data comes from ourworldindata.org
93 |