A diagram of student performance grouped by final grade for the class and socio-economic status.
This demonstrates how to use d3-annotation() to draw a Circle Pack. Because circle packing as a diagram uses enclosure to signal hierarchy (in other words, you draw a circle around all of a parent node’s children) it might make more sense visually to signal the containers as annotations and only the leaf nodes using traditional data visualization methods. Here I use d3.circlePack to format the data but I only instantiate the leaf nodes (the colored and filled circles) and pass the remaining parent nodes (except for the root node) to d3-annotation for use as annotations.
d3-annotation by Susie Lu.