Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Circle Pack with Gradients

Public visualization

Viewing a saved revision (read-only)

dbfbf1bc68d045e9a992c9580bb6def5

Circle Pack with Gradients

0 stars4🌍 Public
CCurran Kelleher
Last edited Jun 1, 2024
Created on May 28, 2024
Forked from Portrait of React

This circle pack visualization displays the file hierarchy of the React source code, with each circle’s size proportional to file size and color encoding file extension. It uses `d3.pack`, `d3.hierarchy`, and `d3.zoom`, with radial gradients applied to every circle via SVG `<radialGradient>` elements. Gradients are computed from a depth-based grayscale scale for directories and per-extension colors for files. The data loads from a remote Gist, and dynamic recomputation is memoized on DOM nodes using a custom `computed` function.

AI-generated description