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:
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
dx values, we now get just
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
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.
PS: You should also follow me on twitter 👉 here.
It's where I go to shoot the shit about programming.