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.
See the Pen Histogram D3v3 by Swizec Teller (@swizec) on CodePen.
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:
See the Pen Histogram D3v4 by Swizec Teller (@swizec) on CodePen.
Same unstyled result, and the code looks samey too.
Here are the differences:
d3.layout.histogrambecomesd3.histogram.binsbecomes.thresholdsd3.scale.linearbecomesd3.scaleLineard.x+d.dxbecomesd.x1d.ybecomesd.lengthd.dxbecomesd.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.
Continue reading about Histogram in D3v3 vs D3v4
Semantically similar articles hand-picked by GPT-4
- The story behind React + D3v4
- JavaScript’s most popular dataviz library
- 3 key insights that make D3.js easy to learn
- Livecoding #34: A Map of Global Migrations, Part 3
- Livecoding Recap: A new more versatile React pattern
Learned something new?
Read more Software Engineering Lessons from Production
I write articles with real insight into the career and skills of a modern software engineer. "Raw and honest from the heart!" as one reader described them. Fueled by lessons learned over 20 years of building production code for side-projects, small businesses, and hyper growth startups. Both successful and not.
Subscribe below 👇
Software Engineering Lessons from Production
Join Swizec's Newsletter and get insightful emails 💌 on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.
"Man, love your simple writing! Yours is the only newsletter I open and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. 👌"
Have a burning question that you think I can answer? Hit me up on twitter and I'll do my best.
Who am I and who do I help? I'm Swizec Teller and I turn coders into engineers with "Raw and honest from the heart!" writing. No bullshit. Real insights into the career and skills of a modern software engineer.
Want to become a true senior engineer? Take ownership, have autonomy, and be a force multiplier on your team. The Senior Engineer Mindset ebook can help 👉 swizec.com/senior-mindset. These are the shifts in mindset that unlocked my career.
Curious about Serverless and the modern backend? Check out Serverless Handbook, for frontend engineers 👉 ServerlessHandbook.dev
Want to Stop copy pasting D3 examples and create data visualizations of your own? Learn how to build scalable dataviz React components your whole team can understand with React for Data Visualization
Want to get my best emails on JavaScript, React, Serverless, Fullstack Web, or Indie Hacking? Check out swizec.com/collections
Did someone amazing share this letter with you? Wonderful! You can sign up for my weekly letters for software engineers on their path to greatness, here: swizec.com/blog
Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com
By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️