Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Black & White Nested Circles

Public visualization

Black & White Nested Circles

3 stars2🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Jun 7, 2024
Forked from Portrait of React

This visualization displays the React source code as a circular treemap, with nested circles representing the file hierarchy. The circle packing layout is computed using D3's `pack` and `hierarchy` functions, and circles are colored based on file type or by depth using black and white. The code uses D3's `zoom` behavior for interactive pan and zoom, and a memoization function called `computed` optimizes rendering performance. File size influences circle opacity, while labels are added but curved labels are disabled for performance.

AI-generated description

A circle pack visualization of the React source code.

Order a canvas print of this graphic!

Data comes from Gist:File Loading Script.

Comments

Sign in to join the discussion.

MIT Licensed