This video explains how to make a treemap from previously imported 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 our svg…and we're gonna give it an attribute…
- Making a simple bar chart with D3
- Understanding SVG graphics
- Drawing basic shapes
- Adding text
- Using generators and the path element
- Creating a scale and axes
- Importing data into D3
- Creating trees and Voronoi tessellations
- Preparing your data for advanced graphics
- Adding interactivity and transitions
- Choosing the right graphic
- Finding D3.js plugins
Skill Level Intermediate
2. Making a Simple Bar Chart with D3
3. Basic Shapes, Courtesy of SVG
4. Advanced Shapes, with D3 and Path
5. Scales and Axes
6. Importing Data into D3
7. Additional Graphics with D3 Layout
8. Preparing Your Data for Advanced Graphics
10. Picking the Right Graphic
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.