Skip to main content
100%

SAVE POINT Circle Packing

✓ Published1🌍 Public
QQuinn Sebso
Last edited May 13, 2024
Created on May 10, 2024

This interactive circle packing visualization displays a medical dataset as a hierarchical arrangement of nested circles, where each node represents a category or item and its size corresponds to its value. Users can click on any circle to zoom into that subtree, with the view smoothly animating to focus on the selected level. Built with D3.js v4 and React, the visualization uses the `d3.pack()` layout algorithm, `d3.hierarchy()` for data structuring, and `d3.interpolateZoom()` for the zoom transitions. Node colors are assigned via a linear scale with HCL interpolation based on hierarchy depth. The visualization loads its data from a remote JSON file hosted on GitHub.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes