From the course: D3.js Essential Training for Data Scientists

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Making a tree from JSON

Making a tree from JSON - D3.js Tutorial

From the course: D3.js Essential Training for Data Scientists

Start my 1-month free trial

Making a tree from JSON

“

- [Narrator] Now we're going to make a tree diagram using our JSON data. So let's start with the usual. Gonna make a new file and save it as tree.js. And then we're gonna re-reference our d3.html page. And we can close down the data handler's page if you've still got that open. So we can start with the usual, height 200. Width we're gonna make 500. And margin is an object, like so. Now we're going to declare the layout function with a variable called tree. You can call it whatever you like, and that is d3.tree. And then it takes one parameter, which you size. Size takes an array, and previously when we've seen this sort of behavior the array has consisted mostly of min and then max. But in this case, it's width and then height. Now this bit of code on its own isn't going to draw us a tree. It's only gonna do something when we call it later. So let's add our svg and we'll give it attributes of full width and full height. There we go. And again, as normal, we're gonna add chartGroup to…

Contents