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)

History

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:

• git checkout c5c2bdd The initial state of the project.
• git checkout 3ef3e22 Using styled components.
• git checkout 3b17d8e Create your own react component.
• git checkout 283bbb4 Use themes to keep values in one place.
• git checkout 0355dfb Load data from URLs.
• git checkout 29654d8 Cleaning a bit #1.
• git checkout a5346fa SVG bar chart.
• git checkout 9104300 Showing percentages.
• git checkout 8e29a77 Cleaning a bit #2.
• git checkout 5cef112 Mouse interaction and redux.
• git checkout 4a29fda More convenient redux use.
• git checkout d171860 Animating transitions.
• git checkout 24dcd7a Create wrapper component for loading data.
• git checkout c4672b7 Make the animated rectangle a wrapper.
• git checkout 354b414 Draw scatterplot using canvas.