Skip to main content
Explore
Solutions
Bespoke Studio
Pricing
Quick Start
Demo
Log in
Send feedback
✕
Tell us what works and what could be better. We read every submission.
Send feedback
✕
Tell us what works and what could be better. We read every submission.
Home
•
Fork Viz
Fork Viz
Create your own copy of this visualization.
Forking from
Code Tree Viz from Livestream
Title
*
Description
This visualization uses a circle packing layout to display the file structure of the Vue Core source code, where each file is represented as a circle sized by its byte size and colored by its file extension. The visualization uses D3's `hierarchy`, `pack`, and `scaleLinear` APIs to compute the layout and map file sizes to circle radii and opacity. The data is fetched from a GitHub Gist containing a JSON snapshot of the repository, and each circle's color is determined by a hard-coded map of file extensions to colors. Hovering over a circle highlights it interactively.
Visibility
Public
Private (only you), Pro
Unlisted (anyone with link)
Private work requires Pro.
Upgrade
Cancel
Fork Viz