Developing delightful dataviz for diverse devices with D3.js

We're hiring, I think?

Pros of using charting libraries:

Quick to use
Simpler to learn
More readable, usually

Cons of using charting libraries:

Variable performance
Limited features & restrictive APIs

On the other hand they have some disadvantages too:

DOWN

1. They're not always performant enough: Sometimes because of excessive download size, and sometimes in terms of animation performance. I've found they can be a bit janky at times if you're doing something complex.

DOWN

2. Less control: Abstractions may not fit your use case. Because they're usually fairly opinionated, they don't always do everything you want them to. Often I find that it's not until a chart is nearly done that I discover the limitations of a given library's API, and realise that it it's not able to implement certain quirks of the design I've been given. So then I have to start all over again in something else.

So what I often do is prototype an MVP in a charting library, then build a more fleshed-out version in D3 once I've got more time to invest.

But some of you might be wondering what D3 is, and why I didn't include it in the list. After all, it's a data visualisation library too. But unlike the others, it's much more low-level, enough so to be a whole different sort of animal. It's a bit more like jQuery or Underscore than a true charting library, in the sense that, rather than giving you ready-built charts or chart components that you can configure, it gives you the tools to build your own custom charts from scratch, along with a set of best practices.

And in fact the syntax looks pretty similar to jQuery too. So if you like method chaining, you'll love it

D3 is also designed to enforce separation of concerns between data and presentation, just like the web was traditonally supposed to with HTML & CSS. I know that's not a popular idea these days, what with CSS in JS and all, but it can still be a useful model at times. Fight me.

Pros of using D3:

Powerful
Flexible
Performant
Popular and well-established

There are several advantages to using D3 over other charting libraries:

DOWN _ _ _ _ Slow down!

1. D3 gives you full control over how things look, and has so many different tools and algorithms that you can mix and match to create really cool effects. I've been working with d3 for about 4 years and I still regularly come across things where I'm like, whoa, D3 can do that?

It's also very large. Lots of different APIs. Huge file size if you import the whole thing, but it's modular, as of version 4, so you can just import the bits you want.

DOWN

2. Works seamlessly with existing web technologies. Plays well with other tools. Can manipulate any part of the DOM, or use it with SVG, Canvas, WebGL, or whatever.

DOWN

3. D3's animations are usually really smooth, even with transitions involving hundreds of different objects.

DOWN

4. Large community, lots of examples, tutorials, stackoverflow questions, demos.

Cons of using D3:

Steeper learning curve
More complex
Takes longer to make a basic chart
Have to give talks about using D3 + React

D3 + React

Updating the DOM

D3

Complex animation
SVG helpers, e.g. axes

React

Better code structure
More readable

Transitions

Enter (add) / Exit (delete) / Update:

Have fun with it

Thanks!

Don't forget to like and subscribe 👍

Slides: richardwestenra.com/d3-talk-2

Resources

Elijah Meeks: Interactive Applications with React & D3 (Medium)

Scott Murray: Interactive Data Visualization for the Web (book + tutorials)

Mike Bostock: bl.ocks (examples)