This visualization shows a hierarchical circle packing layout of a mouse breeding colony, with circles representing individual mice and generations nested inside parent nodes. The color of each circle encodes the mouse’s gender—blue for males and pink for females—while the size reflects the number of offspring. Users can click on a circle to zoom into that branch of the family tree or use the text input to search for a specific mouse ID. The code uses D3 v4’s `d3.hierarchy` and `d3.pack` to compute the layout, with animated zoom transitions via `d3.interpolateZoom`, and reads hierarchical data from a JSON file.