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

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

...

/

You're awesome

You're awesome

You know the basics! You can take any D3 example from the internets and wrap it in a React component, and you know how to build React+D3 components from scratch. ...

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

Preview Free Lessons→

Preview Free Lessons