React & D3: Preparing The Data With D3.Nest
By: Joe Keohan
Tags: Data Visualization, D3js, Dashboard, React, Front End Development

Image by author

The last and final item to refactor for Streetball Mecca is the interactive bar chart. At this point, I have basically rewritten the entire codebase from D3 over to React. The initial migration over to React took the D3 within React approach where D3 was used for data binding, rendering, and updating the DOM elements. Once I got things to work within the React ecosystem, I then refactored for a more D3 for the math and React for everything else approach. I’m still looking for a much shorter phrase to capture that concept so if you have any suggestions please send them my way!

Nesting The Data Using D3.Nest

For this article, I decided to focus solely on walking through the process of coercing the data into nested format in order to render the bar chart. Nesting the data had already been done in the original CodePen and, although this required no further edits, I thought it represented an opportunity to highlight the awesome power of D3’s helper functions, like d3.nest.

Although React was able to take on state management, DOM rendering, and event handling, D3 still had a vital role in the codebase, in this case, nesting the data.

The Original Dataset

The original data set consisted of an array of 306 individual parks with each one organized as an object of key:value pairs.

Image by author

Nesting Parks By Neighborhood

In order to render the bar chart, the data needed to be reorganized into another format. Each park included a key called neighborhood and was assigned the value of the neighborhood in which the park was located. That became the starting point to nest the data and include the corresponding parks as a nested array.

The overall average of all parks within the neighborhood was also needed, as well as the borough and neighborhood code. Using d3.nest I was able to create the following:

Image by author

d3.nest is one of D3’s data formatting methods. It nests data based on a defined key and stores all related data in a value object. Both key and value are hard coded into the method, although we have the ability to add any additional supporting keys of our choosing.

Documenting Errors/Issues/Resolutions

Copying & pasting the code didn’t initially work as the D3 library had made some changes from 5.7 => 6.2. When I received the initial error I decided to include it along with other errors/issues/resolutions I had been documenting. I too often find myself trying to resolve the same error knowing full well that I’ve already resolved it in a previous project.

Here is the format I’ve been using to capture/record any error/issue/resolution encountered during the project.

Image by author

The issue turned out being that d3.nest was no longer supported in D3v6 and needed to be imported from d3-collection. Ironically enough, just as I went to add the link from the d3.collection page I noticed the following deprecation message which states to use d3-array’s group and rollup methods instead of d3.nest.

Image taken from the D3 docs

In all honesty, I did invest a few minutes trying to refactor d3.nest over the new methods but didn’t quite get it to work so I decided to put that aside for now and save it for a future article. With the way technology progresses I’ll never be pressed to find new and interesting topics to write about.

Importing And Using The Libraries

The first thing we need to do in order to work with d3.nest is to import {nest} from d3-collection, along with d3 as I needed one additional helper method.

Image by author

d3.nest makes use of the following methods:

.key — the main key value used to nest the data

.rollup — provides the opportunity to include new key:values

.entries — the dataset to be mapped over

The .key() method is fairly basic and takes in a callback that is used to determine the top level values by which to nest the data and .entries() is then passed the data array.

Image by author

.rollup() does the bulk of the work here and is used to return an object that includes an array of nested child elements along with any additional data points you may need from the dataset.

It was here that I made use of d3.mean, which is one of the many d3.array methods. d3.mean was used to return the average of the overall scores assigned to each park in that neighborhood.

This is once instance where the power of D3 truly shines as a data visualization library. Not only does it provide the methods to visualize data, such as building out the bar chart and axes, but also its tools format the data as well.

The parks are then rolled up into an array called parks and all the data points are stored in a value key to produce the following.

Image by author

Conclusion

This project has taken much longer to work through than I anticipated and required quite a bit of research along the way. Working through the refactor I had the opportunity to revisit D3 specific concepts that I haven’t worked with in quite some time, like d3.nest. It’s still a great option to use when nesting data.

Here is the link to the CodeSandbox d3.nest example if you wanted to take a further look. As always, if you have any feedback or comments I’d love to hear them.

Additional Articles

Here are some additional articles I’ve written on refactoring the code from D3 => React.