D3v4 has been out since June. That’s almost five months. That’s also just long enough to make my React+D3.js ES6 book crazy outdated and to fill my inbox with emails saying, "Yo, all your code is broken.”

Yes, all my code is broken, and I'm working on an update. There were a ton of changes in D3v4, but how different is it, really?

Not that different! The Levenshtein distance between a D3v3 histogram and a D3v4 histogram is only 82. It takes 82 1-character edits to go from a D3v3 histogram to a D3v4 histogram.

That might sound like a bunch of edits, but the D3v4 example is a whopping 1026 characters. The D3v3 version is 1050.

It’s 24 characters shorter and only 7.8% different. That doesn't sound so bad, does it?

Here's a D3v3 histogram of a movie weekend dataset I found on a list of datasets by the Journal of Statistical Education. It uses ES6 and pure D3 without React.

We load some data with d3.tsv, build a histogram with d3.layout.histogram, set up a linear scale for each axis, and add a rect to the SVG for each histogram entry.

Now here’s the same dataset in D3v4:

Same unstyled result, and the code looks samey too.

Here are the differences:

• d3.layout.histogram becomes d3.histogram
• .bins becomes .thresholds
• d3.scale.linear becomes d3.scaleLinear
• d.x+d.dx becomes d.x1
• d.y becomes d.length
• d.dx becomes d.x1-d.x0

Some of the API has been moved around and renamed to make more sense. Thresholds make more sense than bins, but scaleLinear vs. scale.linear… eh… sure. ¯_(ツ)/¯

The biggest difference lies in histogram's return value. Where before we would get an array of arrays with additional x, y, and dx values, we now get just x0 and x1.

I like the x0, x1 approach because it tells us the lower and upper bound of each interval. This means less typing and thinking overhead in all cases except for one – when you do need the width. And I like the idea of relying on length instead of having an extra y property that's the same as length.

I like all the changes, and I think they improve the library by leaps and bounds. But it's these subtle differences that are the most annoying to catch.

Curiously, D3v3 calculates a bin width of 1962.5, and D3v4 gets 2000. Same data, same amount of bins. ?

Want more about the differences between D3v3 and D3v4? I'm thinking of making a cheatsheet. Encourage me on Twitter.

About the Author

Hi, I’m Swizec Teller. I help coders become software engineers.

Story time 👇

React+D3 started as a bet in April 2015. A friend wanted to learn React and challenged me to publish a book. A month later React+D3 launched with 79 pages of hard earned knowledge.

In April 2016 it became React+D3 ES6. 117 pages and growing beyond a single big project it was a huge success. I kept going, started live streaming, and publishing videos on YouTube.

In 2017, after 10 months of work, React + D3v4 became the best book I'd ever written. At 249 pages, many examples, and code to play with it was designed like a step-by-step course. But I felt something was missing.

So in late 2018 I rebuilt the entire thing as React for Data Visualization — a proper video course. Designed for busy people with real lives like you. Over 8 hours of video material, split into chunks no longer than 5 minutes, a bunch of new chapters, and techniques I discovered along the way.

React for Data Visualization is the best way to learn how to build scalable dataviz components your whole team can understand.

Some of my work has been featured in 👇