This repository is a simple template and workflow for developing interactive data visualisations with modern JavaScript using Node.js, Babel, rollup and D3. The aim is to be able to use the latest features of JavaScript, while generating code that works across a wide range of browsers. You will need to have Node.js installed.
The template now supports D3 version 7. As D3 has fully adopted ES2015, D3 modules in the node_modules
folder are now transpiled along with your own source code when you build the production bundle. If you are using D3 version 5 or earlier and don't need to transpile D3, you should change the regular expression that is used as the exclusion rule for babel-loader on line 26 of rollup.config.js
to the following:
/node_modules\/(?!(?!(whatwg-fetch)\/).*/
The easiest way of using the template is to clone this repository into a new project directory and install the required modules using the pre-defined package.json
.
1. Clone the repository into a project directory.
git clone https://github.com/olihawkins/vis-template my-project
2. Change into the project directory.
cd my-project
3. Remove the git files.
rm -rf .git .gitignore LICENSE readme.md
4. Install from package.json
.
npm install
An alternative method involves manually downloading the latest versions of the packages. This may be useful if you want to upgrade to newer versions of the packages, or customise the setup in other ways.
1. Clone the repository into a project directory.
git clone https://github.com/olihawkins/vis-template my-project
2. Change into the project directory.
cd my-project
4. Remove the git files and the existing package.json
files.
rm -rf .git .gitignore LICENSE readme.md package.json package-lock.json
5. Initialise the project folder with npm
to create a new package.json
.
npm init
6. Install the development dependencies.
npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env rollup @rollup/plugin-babel rollup-plugin-terser @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-serve eslint
7. Install the package dependencies.
npm install --save @babel/runtime @babel/runtime-corejs3 whatwg-fetch d3
8. Open package.json
and add the following entries to scripts
(above the entry for test
).
"build": "rollup -c --watch",
The src
directory contains the input JavaScript source file index.js
, while the dist
directory contains the index.html
webpage. Once you have set up the workflow you can edit src/index.js
and dist/index.html
to develop your visualisation.
To begin development, start rollup and navigate to localhost:10001 in your browser.
npm run build
Rollup transpiles and bundles src/index.js
as dist/index.min.js
, including any modules index.js
imports.
In its initial state, index.js
contains some example code, which checks that rollup, Babel and D3 are working correctly. Replace this with your visualisation code.
Note that D3 needs the whatwg-fetch
polyfill for d3-fetch
functions to work in older browsers. All other polyfills are handled automatically by Babel and core-js.
You can optionally create a .eslintrc
for the project if you use linting in your text editor.
./node_modules/.bin/eslint --init
This is a simple setup. You can configure rollup to do a lot more than this. More information on the technologies used for this workflow can be found in the documentation.