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

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

...

/

Animation

Animation

Welcome to the animation section. This is where the real fun begins. Demos that look cool and impress your friends.

You already know how React and D3 work together, so these demos are going to go faster. You know that we’re using React ...

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

Preview Free Lessons→

Preview Free Lessons