This project is meant to show-case basic functionality of
and some common libraries in the context of creating visualizations. It shows a basic histogram using
and a basic scatterplot using
Run the project
In order to get the project running you need to first install the dependencies via
Afterwards the react-server can be started via
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
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.
- React Developer Tools
- Redux DevTools
- JSON Formatter (useful in general)
npm packages (
npm install --save packagename):
pixi.js(not used in this tutorial as we are manually using
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
git checkout master:
git checkout c5c2bddThe initial state of the project.
git checkout 3ef3e22Using styled components.
git checkout 3b17d8eCreate your own react component.
git checkout 283bbb4Use themes to keep values in one place.
git checkout 0355dfbLoad data from URLs.
git checkout 29654d8Cleaning a bit #1.
git checkout a5346fa
git checkout 9104300Showing percentages.
git checkout 8e29a77Cleaning a bit #2.
git checkout 5cef112Mouse interaction and
git checkout 4a29fdaMore convenient
git checkout d171860Animating transitions.
git checkout 24dcd7aCreate wrapper component for loading data.
git checkout c4672b7Make the animated rectangle a wrapper.
git checkout 354b414Draw scatterplot using