Bonus chart! Sunburst radial partition joy!
Oh, you thought we were done? Let's squeeze one more chart out of d3-hierarchy
before moving on.
If you remember, the partition chart was a bit funky, largely because it's mainly used in datasets where only the leaf nodes (that is, the outermost nodes without children) have a value. Since some of the parents in our dataset have screentime
values, this sort of distorts it and makes it look odd. We will re-render that, but make it all cool and circular this time.
You know the drill. main.js
:
westerosChart.init('radialPartition', 'data/GoT-lineages-screentimes.json');
In chapter6/index.js
:
westerosChart.radialPartition = function RadialPartition(_data) { const data = getMajorHouses(_data) .map((d, i, a) => Object.assign(d, { screentime: a.filter(v => v.fatherLabel === d.itemLabel).length ? 0 : d.screentime, }) ); const radius = Math.min(this.innerWidth, this.innerHeight) / 2; };
We start by creating a radius that...