Hi, I’m Swizec Teller. Over the years I've helped over 10,000 engineers hone their craft. 

With React+D3v4 you'll learn the basics of building fast data visualization components in about an hour. Get started immediately without installing anything.

I based React+D3v4 on 20 years of experience with learning how to code on my own, reading blogs and articles, listening to professors, and working with mentors.

Don't know React? React+D3v4 starts at the very beginning.

Struggling with D3? Every function is explained.

Christina

I bought your course Because D3.js is highly flexible, and writing a bunch of method chaining sucks for D3

Frontend Engineer

Francois

I'm a react veteran who has always wanted to learn D3. I know enough about it to know there will be some quirks integrating with react, so figured your book would save me and my team from having to figure those out on our own. 

I use React because it is the sane way of doing things. I use D3 because I have to. I want nice interactive charts. I want to stay sane.

Software Engineer

Amit

In my old age, I love having practical examples to help me learn new things faster.

D3's docs alone are okay but marrying them with React (as a react newbie) is not as straightforward as someone handholding you through the process. And, since I don't have hours after work or on weekends to hack on things like I used to before I was married (or had kids), I need to optimize my learning.

I already owned your previous version and know it would be worth my money to buy the updated version.

Thanks for all of the hard work!

Freelance Engineer

Become a data visualization engineer with React + D3v4

Welcome to the main part of React + D3v4. We're going to talk a little theory, learn some principles, and then get our hands dirty with a few examples. Through this book you're going to build:

- [A few small Code widgets](https://www.educative.io/collection/page/10370001/5710051981393920/5706014712135680/)
- [A choropleth map](https://www.educative.io/collection/page/10370001/5710051981393920/5659154471452672/)
- [An interactive histogram](https://www.educative.io/collection/page/10370001/5710051981393920/5730811705819136/)
- [A rainbow snake](https://www.educative.io/collection/page/10370001/5710051981393920/5686719571558400/)
- [An animated alphabet](https://www.educative.io/collection/page/10370001/5710051981393920/5103344901160960/)
- [A simple particle generator with Redux](https://www.educative.io/collection/page/10370001/5710051981393920/5753377463992320/)
- [A particle generator pushed to 20,000 elements with canvas](https://www.educative.io/collection/page/10370001/5710051981393920/5696494917124096/)
- [Billiards simulation with MobX and canvas](https://www.educative.io/collection/page/10370001/5710051981393920/5648369808572416/)
- [A dancing fractal tree](https://www.educative.io/collection/page/10370001/5710051981393920/5724717147226112/)

Looks random, right? Bear with me.

Examples build on each other in complexity. **The first** teaches you how to make a static data visualization component and shows you an approach to declarative data visualization. **The second** adds interactivity and components interacting with each other in order to teach you about a simple approach to state management. **The third** shows you how to use transitions to build simple animations. **The fifth** shows you complex transitions with entering and exiting components. **The fifth** shows you how to do complex animation using a game loop principle. **The sixth, seventh, and eighth** show you how to approach speed optimization to smoothly animate thousands of elements.

Throughout our examples, we're going to use **React 15**, compatible with **React 16 Fiber**, **D3v4**, and **ES6+**. In the particle generator, we're also going to use **Redux** to drive the game loop and **Konva** for canvas manipulation. The billiards simulation uses **MobX** so you can compare it to Redux and learn both.

Don't worry if you're not comfortable with ES6 syntax yet. By the end of this book, you're gonna love it!

Until then, here's an interactive cheatsheet: [es6cheatsheet.com](https://es6cheatsheet.com/). It uses code samples to compare the ES5 way with the ES6 way so you can brush up quickly.

In the interest of looking towards the future, we'll check out **Preact** and **Inferno** in the final fractal example. They're new React-like libraries that promise better performance and smaller file sizes. Their creators – Jason Miller and Dominic Gannaway - graciously forked my fractal tree example and built the same thing in their respective libraries. Thank you!

----

Before we begin our examples, let's talk about how React and D3 fit together and how we're going to structure our apps. If you prefer to get your hands dirty first and ask questions later, skip this section and jump to the examples.

This section is split into five chapters:

- [Basic Approach](https://www.educative.io/collection/page/10370001/5710051981393920/5706014712135680/)
- [Blackbox Components](https://www.educative.io/collection/page/10370001/5710051981393920/5666294854582272/)
- [Full Feature Integration](https://www.educative.io/collection/page/10370001/5710051981393920/5649424223043584/)
- [State Handling Architecture](https://www.educative.io/collection/page/10370001/5710051981393920/5682553453281280/)
- [Structuring your React App](https://www.educative.io/collection/page/10370001/5710051981393920/5760756217806848/)

Introduction

The Meat Start

Simpler Environment

The New Meat

Animation

Animating React Redux

Speed Optimizations

Conclusion

Appendices

Visualizing data with React and d3.js