React+D3v4

Introduction

Foreword

Why you should read React + D3v4

What you need to know

1. How to read this book

Why React and D3.js

Buzzword soup explained

JSX

1. Visualizing data with React and d3.js

The basic approach

Blackbox Components

1. A quick blackbox example - a D3 axis
2. A quick blackbox example - a React+D3 axis

A D3 blackbox higher order component – HOC

Full-feature Integration

1. A color scale

You’re awesome

State Handling Architecture

1. Basic architecture
2. A caveat

Structuring your React app

Set up a local environment with create-react-app

1. Make sure you have node.js
2. Install create-react-app
3. Run create-react-app
4. What you get
5. Install dependencies for this book
6. A big example project - 176,113 tech salaries visualized

Show a Preloader

1. Step 1: Get the image
2. Step 2: Preloader component
3. Step 3: Update App
4. Step 4: Load Bootstrap styles

Asynchronously load data

1. Step 0: Get the data
2. Step 1: Prep App.js
3. Step 2: Prep data parsing functions
4. Step 3: Load the datasets
5. Step 4: Tie the datasets together

Render a choropleth map of the US

1. Step 1: Prep App.js
2. Step 2: CountyMap/index.js
3. Step 3: CountyMap/CountyMap.js
4. Step 4: CountyMap/County.js

Render a Histogram of salaries

1. Step 1: Prep App.js
2. Step 2: CSS changes
3. Step 3: Histogram component
4. Step 4: HistogramBar (sub)component
5. Step 5: Axis HOC

Make it understandable - meta info

1. Dynamic title
2. Dynamic description
3. Median household line

Add user controls for data slicing and dicing

1. Step 1: Update App.js
2. Step 2: Build Controls component
3. Step 3: Build ControlRow component
4. Step 4: Build Toggle component
5. Step 5: Add US state and Job Title filters

A small speed optimization

Rudimentary routing

Prep for launch

1. Setting up deployment
2. Twitter and Facebook cards and SEO
3. Full dataset

Launch!

1. Animation

Using a game loop for rich animation

1. A bouncing ball

Using transitions for simple animation

1. Rainbow snake

Enter/update/exit animation

1. Animated alphabet

Animating with React, Redux, and d3

1. Here’s how it works
2. 3 presentation components
3. 6 Redux Actions
4. 1 Container component
5. 1 Redux Reducer
6. What we learned
7. Speed optimizations

Using canvas

1. Why Canvas
2. The trouble with HTML5 Canvas

Declarative HTML5 Canvas with Konva and react-konva

1. A particle generator pushed to 20,000 elements with Canvas
2. Billiards simulation with MobX and canvas

Using a React alternative like Preact or Inferno

1. Stress testing with a recursive fractal
2. Trying the stress test in Preact and Inferno
3. Conclusion
4. Appendixes

Appendix A - roll your own environment

1. Bundle with Webpack
2. Compile with Babel
3. Quickstart
4. NPM for dependencies and tools
5. Step-by-step with boilerplate
6. Add Less compiling
7. Serve static files in development
8. Webpack nice-to-haves
9. Optionally enable ES7
10. Check that everything works
11. Remove sample code
12. The environment in depth
13. That’s it. Time to play!

Appendix B - Browserify-based environment

1. NPM for server-side tools
2. The development server
3. Compiling our code with Grunt
4. Managing client-side dependencies with Bower
5. Final check