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

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

...

/

Speed optimizations

Speed optimizations

Welcome to the section on speed optimizations. This is where we make our code harder to read and faster to run.

You might never need any of the techniques discussed here. You already know how ...

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

Preview Free Lessons→

Preview Free Lessons