While working on the 51 Line Charts for my Opioid Crisis data visualization, I ran into an issue with generating all 51 charts at the same time: The data was either in 51 rows stacked and I couldn’t access the dates effectively, or 306 rows unstacked and I had 6x as many objects as I needed when I did a join.

The solution was to use D3.nest. Nesting allows elements in an array to be grouped into a hierarchical tree structure; think of it like the GROUP BY operator in SQL, except you can have multiple levels of grouping, and the resulting output is a tree rather than a flat table. The levels in the tree are specified by key functions.

When I used the state as a key, it grouped each state’s data together in a tree.

Input:

state,code,year,deaths,adjrate
Alabama,1,2010,547,11.8
Alabama,1,2011,552,11.8
Alabama,1,2012,562,12.1
Alabama,1,2013,598,12.7
Alabama,1,2014,723,15.2
Alabama,1,2015,736,15.7
Alaska,2,2010,83,11.6
Alaska,2,2011,107,14.2
Alaska,2,2012,129,17.4
Alaska,2,2013,105,14.4
Alaska,2,2014,124,16.8
Alaska,2,2015,122,16
Arizona,4,2010,1098,17.5
Arizona,4,2011,1071,16.9
Arizona,4,2012,1134,17.7
Arizona,4,2013,1222,18.7
Arizona,4,2014,1211,18.2
Arizona,4,2015,1274,19
Arkansas,5,2010,350,12.5
Arkansas,5,2011,355,12.6
Arkansas,5,2012,373,13.1
Arkansas,5,2013,319,11.1
Arkansas,5,2014,356,12.6
Arkansas,5,2015,392,13.8

D3 code:

d3.nest()
  .key(function(d) { return d.state; })
  .entries(data);

Output:

[
  {
    "key": "Alabama",
    "values": [
      {
        "state": "Alabama",
        "code": "1",
        "year": "2010",
        "deaths": "547",
        "adjrate": "11.8"
      },
      {
        "state": "Alabama",
        "code": "1",
        "year": "2011",
        "deaths": "552",
        "adjrate": "11.8"
      },
      {
        "state": "Alabama",
        "code": "1",
        "year": "2012",
        "deaths": "562",
        "adjrate": "12.1"
      },
      {
        "state": "Alabama",
        "code": "1",
        "year": "2013",
        "deaths": "598",
        "adjrate": "12.7"
      },
      {
        "state": "Alabama",
        "code": "1",
        "year": "2014",
        "deaths": "723",
        "adjrate": "15.2"
      },
      {
        "state": "Alabama",
        "code": "1",
        "year": "2015",
        "deaths": "736",
        "adjrate": "15.7"
      }
    ]
  },
  {
    "key": "Alaska",
    "values": [
      {
        "state": "Alaska",
        "code": "2",
        "year": "2010",
        "deaths": "83",
        "adjrate": "11.6"
      },
      {
        "state": "Alaska",
        "code": "2",
        "year": "2011",
        "deaths": "107",
        "adjrate": "14.2"
      },
      {
        "state": "Alaska",
        "code": "2",
        "year": "2012",
        "deaths": "129",
        "adjrate": "17.4"
      },
      {
        "state": "Alaska",
        "code": "2",
        "year": "2013",
        "deaths": "105",
        "adjrate": "14.4"
      },
      {
        "state": "Alaska",
        "code": "2",
        "year": "2014",
        "deaths": "124",
        "adjrate": "16.8"
      },
      {
        "state": "Alaska",
        "code": "2",
        "year": "2015",
        "deaths": "122",
        "adjrate": "16"
      }
    ]
  },
  {
    "key": "Arizona",
    "values": [
      {
        "state": "Arizona",
        "code": "4",
        "year": "2010",
        "deaths": "1098",
        "adjrate": "17.5"
      },
      {
        "state": "Arizona",
        "code": "4",
        "year": "2011",
        "deaths": "1071",
        "adjrate": "16.9"
      },
      {
        "state": "Arizona",
        "code": "4",
        "year": "2012",
        "deaths": "1134",
        "adjrate": "17.7"
      },
      {
        "state": "Arizona",
        "code": "4",
        "year": "2013",
        "deaths": "1222",
        "adjrate": "18.7"
      },
      {
        "state": "Arizona",
        "code": "4",
        "year": "2014",
        "deaths": "1211",
        "adjrate": "18.2"
      },
      {
        "state": "Arizona",
        "code": "4",
        "year": "2015",
        "deaths": "1274",
        "adjrate": "19"
      }
    ]
  }
]

A few useful tools and resources for understanding d3.nest:

View more TIL posts
See more of my D3.js work