A home for visualizing data in React applications with d3.js
Table of contents
This application is a React app that shows working examples of what D3 can do. Each example contains the application code used to generate the example along with styling. Also there is a Modules tab which contains specific api details contained in the body of D3. And lastly a tab named 'Resources' is a list of links to 3rd party sources to data, design, etc.
Project is created with:
- React: 16.8.6 or greater
- -code-splitting: with React Suspense and lazy()
- Node & Express:
- d3: (using modules ie. d3-scale)
- Webpack v.4
- Babel v.7
- React Router v.4
Pull from github: reactive-d3
$ git clone https://github.com/M-garrigan/reactive-d3.git $ cd reactive-d3
// webpack build with watch flag $ yarn build:dev // nodemon watched express/node server $ yarn start:dev
// webpack prod build $ yarn build // start node server $ yarn start
Also note all files in the dist/ directory is dynamically generated by webpack. So it is safe to completely remove this directory, this is helpfull if the applciation is caching old information or elements.
So a script is provided to remove the dist/ in totality and is simply:
$ yarn clean
This application uses Jest, React-Testing-Library and React-dom/test-utils for testing.
Test files are nested in the src/ dir next to their respective component.
The naming convention for test files is as follows.
A real example would be: NavBar.unit.test.js -or- NavBar.snap.test.js (where snap would indicate snapshot)
Two scripts are available:
The first will run all tests
$ yarn test
The second will run show a table with coverage
$ yarn test:coverage