Member-only story
Migrating to Version 4 of D3, part 1
At a recent Bay Area D3 User Group meetup, I gave a short talk on migrating to the new version of D3. I highlighted some of the changes in the version of D3 and shared a simple case study, with the hopes of helping others get started out.
This article is a slightly modified and expanded version of my talk.
There are so many changes in the new version of D3 that it’s just not possible to cover them all in a short discussion. So I’ll cover a few things that stood out to me as particularly useful.
The new version is full of big changes, and it’s not backward compatible. For a full list of changes, go to the source! There is extensive documentation on the changes in D3.
You could group the changes into three main types:
- Changes to names → “the great namespace flattening”
- Modular Library + NPM
- Lots of Minor and Major restructuring, and additions
“The great namespace flattening”
Renaming (flattening) methods → Bunch of little changes, that you can’t ignore.
d3.random.normal --> d3.randomNormald3.random.logNormal --> d3.randomLogNormald3.scale.linear --> d3.scaleLinear
Modular Library + NPM
Big change. Can ignore this… for now.
Jump into it, if you’re already using npm or just want to dig in deeper.
- D3 Reorganized into smaller modules → smaller downloads, customization
- Can use npm and rollup.js to organize and pack-up your code as ‘plugins’.
- Everything in d3 version 4 is a ‘plugin’, with imports and exports, so you can organize your code into reusable modules
We can still use monolithic version → may be easier for early experimenting!
New Goodies
d3.scan()
- Linear scan of an array
- Similar to d3.min() and d3.max(), which ignore NULL values
- Returns index, instead of value of extreme
Very handy to have the index of an extreme! This opens up a lot of possibilities, that were more tricky before.
d3.set()
- Extracts unique values…
