Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of SAVE POINT Circle Packing - SEARCH

Public visualization

Viewing a saved revision (read-only)

0033fa85945741519e3e89a19cb47e34

Fork of SAVE POINT Circle Packing - SEARCH

0 stars0🌍 Public
QQuinn Sebso
Last edited May 13, 2024
Created on May 13, 2024

A circular packing visualization displays a hierarchical medical dataset as nested circles, with color encoding depth and interactive zooming into subtrees. Users can search by name via an input field with autocomplete, triggering animated zoom transitions on matching nodes. The implementation uses d3.pack for layout, d3.hierarchy for tree construction, and d3.interpolateZoom for smooth transitions, with data fetched from external JSON URLs. Search filtering relies on React state synced with the SVG elements, while rendering remains SVG-based.

AI-generated description

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

See also React Starter.