Nesting in D3.js allows the elements in an array (basically array of objects) to be grouped into a hierarchical tree structure. The levels of this tree can be specified using the key functions. It can also be possible to sort the leaf nodes by the value. This returns the nested array.

In this guide, we will discuss all the functions related to the D3.js nests collection with examples. As a bonus, we will see how to run the code snippets in the observable with some functions. We use the following HTML template for all the examples that are discussed in this guide. Only this script is provided for all the examples; you can include the script in the following template:

Nests – Collection API

Nest.entries(Array)

In D3 nests, the nest.entries() function applies the nest to a specific array (every level of hierarchy) which returns the array of key-value entries (similar to map). Its parameter is an array of objects.

Return Format:

Create an array of five “cases” objects, pass the case_source as the key, and generate the nests by passing “cases” to the entries() function.

Output:

Inspect the HTML page and view it in the console.

Key1: “Phone” with two objects in the array, Key2: “Email” with two objects in the array, and Key3: “Web” with one object in the array.

Nest.key(Key)

If you want to register a new key function that is invoked for each element in the array, use the nest.key() function. Pass the key as the parameter in the form of accessor.

Use the previous array of “cases” objects and pass the case_priority as the first key and case_source as the second key.

Output:

• The first nest holds two arrays with the “Medium” and “High” keys.

• Let’s expand the first key. The following nest is displayed. For the “Medium” (case priority) key, there are two nested keys – “Phone” (this holds one object) and “Web” (this holds one object).

• Let’s expand the second key. The following nest is displayed. For the “High” key, there are two nested keys – “Email” (this holds two objects) and “Phone” (this holds one object).

Nest.map(Array)

It is possible to generate a map from the nested pairs. Here, all the entries in the map (returned) correspond to a distinct key value that is returned by the first key function.

Use the previous array of the “cases” objects and create a map using nest.map() by passing “cases” as the input parameter to it.

Output:

Here, the map is generated based on the case_source key. The first key which is “Email” holds an array with two objects and the second key which is “Phone” holds an array with two objects. The last key which is “Web” holds an array with one object.

Nest.object(Array)

It is possible to generate an object from the nested pairs. Here, all the entries in the associative array (returned) correspond to a distinct key value that is returned by the first key function.

Utilize the cases and generate an object using the nest.object() function by passing “cases” as the input parameter to it. Include the key as “case_priority”.

Output:

Here, the object is generated based on the case_priority key. The first key which is “Medium” holds an array with three objects and the second key which is “High” holds an array with two objects.

Nest.sortKeys(Comparator)

We can sort the resultant array of the key-value entries using the sortKeys() function. The “comparator” parameter takes the function to sort the keys in the nest. We can use the “d3.ascending” to sort in the ascending order. Similarly, the “d3.descending” is used to sort the array of the key-value entries in descending order.

Utilize the “cases” data, pass the case_source as a key, and generate the nests by passing “cases” to the entries() function. Sort the results based on keys in ascending and descending order separately by passing the “d3.ascending” and “d3.descending” comparators.

Output:

Bonus: Implementation in Observable Notebook

Until now, we implement the examples in the HTML web browser. The Observable Notebook can be used to implement it directly and it is a free and user-interactive tool.

Let’s create an array of the “cases” objects in the first cell.

Output:

nest.entries() : Pass the “case_priority” key accessor to the key and entries() takes “cases” as a parameter.

Output:

Return the array with two objects. The first object holds three arrays again as the values with the “Medium” key and the second object holds two arrays again as the values with the “High” key.

1. nest.map() : Pass the “case_priority” key accessor to the key and map() takes “cases” as a parameter. This creates a map.

Output:

Map is returned with two keys. The first key which is “Medium” holds an array of two objects and the second key which is “High” holds an array of three objects.

1. nest.object() : Pass the “case_source” key accessor to the key and object() takes “cases” as a parameter. This creates a map.

Output:

Object is returned with three keys. The first key which is “Phone” holds an array of two objects, the second key which is “Email” holds an array of two objects, and the last key holds “Web” with an array of one object.

1. nest.sortKeys() : Sort the keys of the returning array of values in descending order. Here, the key is “case_source”.

Output:

You can see that an array of objects is sorted in descending order based on keys.

Conclusion

In this guide, we learned how to create nests in D3.js and the different functions related to it with examples. Nesting in D3.js allows the elements in an array of objects to be grouped into a hierarchical tree structure. Then, we implemented the same examples in the Observable Notebook. Refer to this Notebook related to nests.