Tutorial on using react for visualization
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
public load data Sep 15, 2017
src using canvas Sep 19, 2017
.gitignore init Sep 15, 2017
LICENSE Create LICENSE Sep 21, 2017
README.md mention deck.gl Oct 5, 2017
package-lock.json now? May 25, 2018
package.json now? May 25, 2018


This project is meant to show-case basic functionality of react and some common libraries in the context of creating visualizations. It shows a basic histogram using SVG and a basic scatterplot using canvas.

Run the project

In order to get the project running you need to first install the dependencies via

npm install

Afterwards the react-server can be started via

npm start

which will automatically open the correct webpage.

The commits of this project are meant to guide through its development by changing / adding one feature at a time. Each commit is explained in detail on github via the links below. You can check out commits from a separate terminal via

git checkout <commithash>

The react-server will automatically detect the change and update the website.

Setting up a react project

You can use Create React App to bootstrap a react project. First, you need to install the create-react-app package:

npm install -g create-react-app

Then you can bootstrap a project via

create-react-app myapp
cd myapp && npm start

In addition to react there are a few common libraries and browser plugins.

Browser plugins:

  • React Developer Tools
  • Redux DevTools
  • JSON Formatter (useful in general)

npm packages (npm install --save packagename):

  • styled-components
  • redux and react-redux
  • knova and react-knova or pixi.js (not used in this tutorial as we are manually using canvas)
  • deck.gl (tutorial here)


The commits of this repository have detailed description on github. Please click on the links below to learn about each step of writing the project. You can follow along using git checkout <commithash>. If the react-server is running the website will update automatically. To get back to the latest version run git checkout master: