Despite the similar name, treemaps bear little visual resemblance to the tree layout we used earlier; instead, they divide a tree into rectangular regions. This requires us to have a dimension to our data; in this case, we'll size the treemap regions based on screen time, nesting each region into its parent. As such, the size of each parent will be the sum of its children, plus its own value.
This is all going to start looking really similar, so we will start writing all of our common functions now. In common/index, add this function, which will give us increasingly deeper gradiations based on a hierarchy:
export const descendantsDarker = (d, color, invert = false, dk = 5) =>
d3.color(
color(
d.ancestors()[d.ancestors().length - 2].id.split(' ').pop()
) )[invert ? 'brighter' : 'darker'](d.depth / dk);This takes a datum, a color scale, and then three options: a Boolean to make the scale go brighter instead of darker, a numerical...