Tree the whales!

Let's start with the most basic of hierarchical charts -- a tree! Create a new function and fill it with the following:

westerosChart.tree = function Tree(_data) {   const data = getMajorHouses(_data);   const chart = this.container;   const stratify = d3.stratify()     .parentId(d => d.fatherLabel)     .id(d => d.itemLabel);   const root = stratify(data);   const layout = d3.tree()     .size([       this.innerWidth,       this.innerHeight,     ]); }

We use our next-to-be-written getMajorHouses() function to filter out characters who don't have a fatherLabel property and whose itemLabel isn't set as anybody's fatherLabel property. We then create a new stratify object and set its parentId() accessor function to each item's fatherLabel and the id() ...

Get D3.js 4.x Data Visualization - Third Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.