A home for visualizing data in React applications with d3.js
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-d3Developer Build
// webpack build with watch flag
$ yarn build:dev
// nodemon watched express/node server
$ yarn start:devProduction Build
// 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.
ComponentName.TestType.test.js
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