d3-interpolate supplies the D3 interpolate function for blending values. In a hierarchical circle pack, it lightens a parent color by blending it with white. section 11.2.2
Lightening circle-pack branches
Install the module with npm install d3-interpolate, import interpolate, and call interpolate(colorScale(d.parent.id), "white")(0.5). The returned color is halfway between the parent’s scale color and white; depth-based logic applies it to language branches. section 11.2.2
Listing 11.12 Applying color to the circles (circle-pack.js)
...
import { colorScale } from "./scales";
import { interpolate } from "d3-interpolate";
export const drawCirclePack = (root, descendants, leaves) => {
...
svg
.selectAll(".pack-circle")
.data(descendants)
.join("circle")
.attr("class", "pack-circle")
...
.attr("fill", d => {
switch (d.depth) { #1
case 1: #2
return colorScale(d.id);
case 2: #3
return interpolate(colorScale(
d.parent.id), "white")(0.5);
default: #4
return "white";
};
})
.attr("stroke", d => d.depth === 0 ? "gray" : "none"); #5
};
Inspect the complete fill callback, including the depth switch, direct family colors, interpolated branch colors, and white defaults. section 11.2.2
