Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SAVE POINT Circle Packing

Public visualization

Viewing a saved revision (read-only)

e015f44193ad499b9e13904256d12a7d

SAVE POINT Circle Packing

0 stars1🌍 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.