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
.
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.
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
andreact-redux
knova
andreact-knova
orpixi.js
(not used in this tutorial as we are manually usingcanvas
)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
:
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 andredux
.git checkout 4a29fda
More convenientredux
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 usingcanvas
.