This is the source for Square's Intro to D3.js tutorial

  • By Square
  • Last update: Nov 24, 2022
  • Comments: 5


  • 1

    Upgrade to d3 v4

    cc @RandomEtc @bhvaleri

    This is a WIP -- most of it was easy, the d3.layout.stackd3.stack is a big change, I didn't get that working yet.

    I'll also need to do another pass to think about how to explain the d3.selection.merge immutable changes and do a read-through to make sure the copy all makes sense

  • 2

    Making click targets for nav items larger.

    Although the highlight for a selected menu item is large, the click target for items in the nav menu is only a single list item. This patch makes moves the 12pt padding onto the link itself, making the nav require less precision to use.

  • 3

    Update tutorial for D3 v5

    This tutorial should be compatible with v6 and v7 as well, since the only breaking changes I know of in those versions is in the file loading API.

    The biggest change I made here is replacing examples & explanations of the old enter/merge/exit update pattern w/ the new selection.join API.

    Other changes:

    • update the README to be more explicit about which version this tutorial supports
    • add link to D3 graph gallery in "further reading" section
    • use fat arrow syntax for functions in code examples, for conciseness
  • 4

    Update a section that was using deprecated code

    A bit of example code on was still using the deprecated rangeRoundBands method. The whole section has been updated to use a band scale instead of an ordinal one.

    I am not sure the description is correct enough after being updated though.

    I got some errors when I ran the code while following along your useful guide, so I figured this would be great for one of my first contributions to open source.

    This would fix issue #22.

  • 5

    rangeRoundBands is deprecated in v4?

    On there is a code section

    var y = d3.scaleOrdinal()
      .rangeRoundBands([0, 75])
      .domain(, i) {
        return d.product;

    It looks like rangeRoundBands was removed in v4?