0% completed

All LessonsFree Lessons

Introduction

Introduction What you need to know Why React and D3.js Buzzword soup explained JSX

The Meat Start

Visualizing data with React and d3.js The basic approach Blackbox Components A D3 blackbox higher order component – HOC Full-feature Integration You're awesome State Handling Architecture Structuring your React app

Simpler Environment

Set up a local environment with create-react-app

The New Meat

A big example project - 176,113 tech salaries visualized Show a Preloader Asynchronously load data Render a choropleth map of the US Render a Histogram of salaries Make it understandable - meta info Add user controls for data slicing and dicing A small speed optimization Rudimentary routing Prep for launch Launch!

Animation

Animation Using a game loop for rich animation Using transitions for simple animation Enter/update/exit animation

Animating React Redux

Animating with React, Redux, and d3

Here's how it works

3 presentation components

6 Redux Actions

1 Container component

1 Redux Reducer

What we learned

Speed Optimizations

Speed optimizations Using canvas Declarative HTML5 Canvas with Konva and react-konva Billiards simulation with MobX and canvas Using a React alternative like Preact or Inferno Trying the stress test in Preact and Inferno

Conclusion

Appendices

Appendix A - roll your own environment Appendix B - Browserify-based environment

...

/

Animating with React, Redux, and d3

Animating with React, Redux, and d3

And now for some pure nerdy fun: A particle generator… or, well, as close as you can get with React and D3. You’d need WebGL for a real particle generator.

We’re making tiny circles fly out of your mouse cursor. Works on mobile with your finger, too.

To see the particle ...

Access this course and 1400+ top-rated courses and projects.

Preview Free Lessons→

Preview Free Lessons