block by emeeks 762b3694269a46151f73f6bc48be6d1c

Annotated Circlepack

Full Screen

Circle Pack as Annotation

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.

index.html

students.js