Visualizing data with React and d3.js
Let's talk about how React and D3 fit together.
The initial chapters get you up to speed and teach you the mental models. Later on we apply them in various scenarios.
Focus on the building blocks first. Use the bigger projects as ideas to play around with. A practice ground if you will :)
This initial section has five core chapters:
- D3 the good parts
- How React makes D3 easier
- When should you use an existing library? Which one?
- Quickly integrate any D3 code in your React project with Blackbox Components
- Build scalable dataviz components with full integration
That gives you the 80/20 rule right there.
Dig through those 5 chapters and you get 80% of the value. Because your time is valuable and I want you to build stuff, not grind theory ❤️
When you're ready, I encourage you to have fun with the examples and the cookbook section in particular. That's where I've been adding new projects every few months.
If you build every example in this course, you'll get:
- A few small components in Codesandbox
- A choropleth map
- An interactive histogram
- A bouncing ball
- A swipe transition
- An animated alphabet
- A simple particle generator with Redux
- A particle generator pushed to 20,000 elements with canvas
- Billiards simulation with MobX and canvas
- A circle graph that transitions to a bar graph
Looks random, right? Bear with me. Examples build on each other.
The first few examples teach you about static data visualizations and the basics of merging React and D3 using two different approaches.
The choropleth and histogram visualizations teach you about interactivity and components working together.
You learn about game loop and transition animations through two types of bouncing balls. Followed by more complex enter/exit transitions with an animated alphabet.
We look at how far we can push React's performance with a simple particle generator and a dancing fractal tree. A billiards game helps us learn about complex canvas manipulation.
Throughout these examples, we're going to use React 16, probably compatible with React 17, D3v5, and modern ES6+ JavaScript syntax. The particle generator also uses Redux for the game loop and the billiards simulation uses MobX. We use Konva for complex canvas stuff.
That way you can build experience in large portions of the React ecosystem so you can choose what you like best.
Don't worry, if you're not comfortable with modern JavaScript syntax just yet. By the end of this book, you're gonna love it!
Until then, here's an interactive cheatsheet: es6cheatsheet.com. It uses runnable code samples to compare the ES5 way with the ES6 way so you can brush up quickly.