Introduction to D3.js


Shirley Wu

Shirley Wu

Data Sketches
Introduction to D3.js

Check out a free preview of the full Introduction to D3.js course

The "Hierarchy" Lesson is part of the full, Introduction to D3.js course featured in this preview video. Here's what you'd learn in this lesson:

Shirley explains that D3 hierarchy is a nested data structure that helps calculate the x, y-positions and, when applicable, the width, height, radius for trees, tree maps, and circle maps. D3 hierarchy takes in raw data and return new objects using functions without mutating the original data.


Transcript from the "Hierarchy" Lesson

>> Another module that I really like in D3 is D3 hierarchy. And this one helps us calculate the positions for, let's say, trees, tree maps, and circle packs. So you can see circle packs, and again, there's examples that you can click and it will link to usually in the observable notebook that explains how to use it.

And so for D3 hierarchy, it helps us calculate the x, y-positions and where applicable the dimensions the width, height, radius for our tree layout or a tree maps, or circle packs. And just like with D3 shapes, they take in our raw data and returns a new object without mutating that original data.

So here's an example nested data set. And in this case, it's the label is clear, it has 10 children. And those 10 children have their own children, goes down and down. And once we pass that in to D3 tree, what we get back is this new nested object with x, y-positions and a few other pieces of information.

And you can see that it maintains, sorry, not this one. It maintains right here a similar, the same nested structure as our original raw data. But you can expand this raw data to see that it remains untouched. And you can use this object to then create each of these nodes, each of these nested nodes.

And position each of the nodes in this tree, and these links that were drawn in between you can actually use D3 shape. D3 shape has a function called link that will help you calculate the path string so that you get these kind of nice little bit curved links between each of the tree nodes.

And so this is how we're getting this tree.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now