Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Final Circle Packing

Public visualization

Viewing a saved revision (read-only)

58db726a0c484691870e59033372907e

Final Circle Packing

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

This interactive circle packing visualization renders a hierarchical medical dataset using D3.js v4, fetching JSON data from external URLs. The visualization displays nested circles colored along a linear hue scale, where users can search for specific nodes via an autocomplete search bar. The code uses `d3.hierarchy` and `d3.pack` for layout computation, with SVG circles representing hierarchy levels. Clicking a node displays its ancestor path, while hover states highlight nodes. The implementation includes a tooltip system for additional node information, all rendered through D3's selection and rendering API within an SVG container.

AI-generated description

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

See also React Starter.