Recently, I’m spending some time to learn more about data visualization and have decided to learn d3.js, starting from the basics. I’m working through Scott Murray‘s book and a few other tutorials created by Mike Bostock (creator of d3 … incredible feat!). D3 is hugely successful visualization library and is lucky to still be in active development. This means things change fast …. and many of the tutorials written using version 3.x ( most tutorials online are done with version 3.x, including the current version of Scott’s book), and do need some tweaking to work well. This post looks at some of those changes.
Understanding the New Changes
So the best place to understand the different changes that have occurred from v3.x to v4.x is to read the rather detailed changelog. It is quite large, and may not be very easy to dig out at first, but its worth taking a look at. One of the primary motivations in v4.x is to make d3 more modular
D3 4.0 is modular. Instead of one library, D3 is now many small libraries that are designed to work together. You can pick and choose which parts to use as you see fit. Each library is maintained in its own repository, allowing decentralized ownership and independent release cycles. The default bundle combines about thirty of these microlibraries.
Also, some changes where made to d3 methods to “flatten namespaces” and improve readability.
For example, with v3.x, to specify top orientation and scale for your visualization axis in d3, this was the way to go d3.svg.axis().scale(xscale).orient(“top”). Now, this has been changed to d3.axisTop(xscale)
Some Important Changes in Methods
Again, the best place to get an idea of the changes in v4.0 is to look through the changelog.
- d3.svg.axis and axis.orient ↦ d3.axisTop, d3.axisRight, d3.axisBottom, d3.axisLeft.
- d3d3.layout.histogram ↦ d3.histogram
- d3.svg.brush ↦ d3.brushX, d3.brushY, d3.brush
- d3.behavior.drag ↦ to d3.drag
- d3.csv.parse ↦ d3.csvParse
- d3.csv.parseRows ↦ d3.csvParseRows
- d3.csv.format ↦ d3.csvFormat
- d3.csv.formatRows ↦ d3.csvFormatRows
- d3.tsv.parse ↦ d3.tsvParse
- d3.tsv.parseRows ↦ d3.tsvParseRows
- d3.tsv.format ↦ d3.tsvFormat
- d3.tsv.formatRows ↦ d3.tsvFormatRows
var x = d3.scaleOrdinal().domain(["a", "b", "c"]).rangeBands([0, width]); // band size is x.rangeBand()
- now becomes
var x = d3.scaleBand().domain(["a", "b", "c"]).range([0, width]); // band size is x.bandwidth()
- d3.scale.linear ↦ d3.scaleLinear
- d3.scale.sqrt ↦ d3.scaleSqrt
- d3.scale.pow ↦ d3.scalePow
- d3.scale.log ↦ d3.scaleLog
- d3.scale.quantize ↦ d3.scaleQuantize
- d3.scale.threshold ↦ d3.scaleThreshold
- d3.scale.quantile ↦ d3.scaleQuantile
- d3.scale.identity ↦ d3.scaleIdentity
- d3.scale.ordinal ↦ d3.scaleOrdinal
- d3.time.scale ↦ d3.scaleTime
- d3.time.scale.utc ↦ d3.scaleUtc
- d3.random.normal ↦ d3.randomNormal
- d3.random.logNormal ↦ d3.randomLogNormal
- d3.random.bates ↦ d3.randomBates
- d3.random.irwinHall ↦ d3.randomIrwinHall
Shapes and Paths
- d3.svg.line ↦ d3.line
- d3.svg.line.radial ↦ d3.radialLine
- d3.svg.area ↦ d3.area
- d3.svg.area.radial ↦ d3.radialArea
- d3.svg.arc ↦ d3.arc
- d3.svg.symbol ↦ d3.symbol
- d3.svg.symbolTypes ↦ d3.symbolTypes
- d3.layout.pie ↦ d3.pie
- d3.layout.stack ↦ d3.stack
- d3.time.second ↦ d3.timeSecond
- d3.time.minute ↦ d3.timeMinute
- d3.time.hour ↦ d3.timeHour
- d3.time.day ↦ d3.timeDay
- d3.time.sunday ↦ d3.timeSunday
- d3.time.monday ↦ d3.timeMonday
- d3.time.tuesday ↦ d3.timeTuesday
- d3.time.wednesday ↦ d3.timeWednesday
- d3.time.thursday ↦ d3.timeThursday
- d3.time.friday ↦ d3.timeFriday
- d3.time.saturday ↦ d3.timeSaturday
- d3.time.week ↦ d3.timeWeek
- d3.time.month ↦ d3.timeMonth
- d3.time.year ↦ d3.timeYear
The D3 Learning Experience .. and Sample Code
The primary attraction to d3 for me was its reliance on SVG. This means that visualizations scale well on large displays (8K.. and more) which I have to work with in recent times. In addition, well done d3 visualizations are simply brilliant and pleasing to gaze upon.
One thing I have also found out (with great pleasure) is d3’s use of css styling approach for SVG elements. Being able to style lines, rectangles, circles etc using css files is a great help.
As part of the learning process, I have converted most of the examples in Scott’s book to v4.x. For anyone interesting the code can be found on github github.