Introduction

I wrote this book for you as an experiment. The theory we’re testing is that technical content works better as a short e-book than as a long article.

You see, the issue with online articles is that they live and die by their length. As soon as you surpass 700 words, everything falls apart. Readers wander off to a different tab in search of memes and funny tweets, never to come back.

This hurts my precious writer’s ego, but more importantly, it sucks for you. If you’re not reading, you’re not learning.

So here we both are.

I’m counting on you to take some time away from the internet, to sit down and read. I’m counting on you to follow the examples. I’m counting on you to learn.

You’re counting on me to have invested more time, effort, and care in crafting this than I would have invested in an article. I have.

I’ve tried to keep this book as concise as possible. iA Writer estimates it will take you about an hour to read React+d3.js, but playing with the examples might take some time, too.

Why you should read React+d3.js

After an hour with React+d3.js, you’ll know how to make React and d3.js play together. You’ll know how to create composable data visualizations. You’re going to understand why that’s a good idea, and you will have the tools to build your own library of reusable visualization parts.

Ultimately, you’re going to understand whether React and d3.js fit the needs of your project.

What you need to know

I’m going to assume you already know how to code and that you’re great with JavaScript. Many books have been written to teach the basics of JavaScript; this is not one of them.

I’m also going to assume some knowledge of d3.js. Since it isn’t a widely-used library, I’m still going to explain the specific bits that we use. If you want to learn d3.js in depth, you should read my book, Data Visualization with d3.js.

React is a new kid on the block, so I’m going to assume you’re not quite as familiar with it. We’re not going to talk about all the details, but you’ll be fine, even if this is your first time looking at React.

The examples in React+d3.js ES6 edition are written in ES6 - ECMAScript2015. Familiarity with the new syntax and language constructs will help, but I’m going to explain everything new that we use.

How to read this book

Relax. Breathe. You’re here to learn. I’m here to teach. I promise Twitter and Facebook will still be there when we’re done.

Just you and some fun code. To get the most out of this material, I suggest two things:

1. Try the example code yourself. Don’t just copy-paste; type it and execute it. Execute it frequently. If something doesn’t fit together, look at the full working project on Github here, or check out the zip files that came with the book.
2. If you already know something, skip that section. You’re awesome. Thanks for making this easier.

React+d3.js is heavily based on code samples. They look like this:

 var foo = 'bar';

Added code looks like this:

 var foo = 'bar’;
 foo += 'this is added’;

Removed code looks like this:

 var foo = 'bar';
 foo += 'this is added';

Each code sample starts with a commented out file path. That’s the file you’re editing. Like this:

// ./src/App.jsx

class App …

Commands that you should run in the terminal start with an $ symbol, like this:

$ npm start

ES5 and ES6 versions

You are reading React+d3.js ES6 edition. Functionally, it’s almost the same as the ES5 version, but it has a better file structure and some additional content.

You can read either version depending on which version of JavaScript you’re more comfortable with. Keep in mind, the ES5 version isn’t getting further updates.

Both will teach you how to effectively use React and d3.js to make reusable data visualization components.