D3.js version 4.x – Examples and Changes from version 3.x


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)

The good news is that this is shorter, and neater! The tough news is that using v3.x namespaces just wont work (with the v4 library) and would result in a JavaScript error “e.g d3.svg is undefined in the example above”. The next section highlights some more of these changes.

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.

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()


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.

About Vykthur

Mobile and Web App Developer and Researcher. Passionate about learning, teaching, and recently - writing.
This entry was posted in Programming, Tutorials and tagged , , , . Bookmark the permalink.
  • louisegallagher

    Thank you – very helpful!

  • Pawel

    you can add
    d3.time.format -> d3.timeFormat