Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

VZCode Source Tree

Public visualization

Viewing a saved revision (read-only)

b50dcff1009b4a3eb0259c8be71144d5

VZCode Source Tree

1 star1🌍 Public
CCurran Kelleher
Last edited Jun 4, 2024
Created on May 31, 2024

This circle pack visualization displays the file structure of the VZCode source code, a React-based code editor. It uses a d3 hierarchy and pack layout to represent directories and files as nested circles, with circle size proportional to file size and color encoding file types. The data is loaded as JSON from a GitHub Gist snapshot of the repository. The rendering includes interactive zoom via d3’s zoom behavior, and labels are placed inside circles using a computed memoization utility.

AI-generated description

A circle pack visualization of the VZCode source code. VZCode is the open source editor used in VizHub.

Data comes from Gist:File Loading Script.