VZCode Source Tree

100%

VZCode Source Tree

✓ Published1🌍 Public

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.

Overview of the VZCode codebase.

test has some unit tests and lots of sample files. These sample files open in VZCode when you run npm run dev
src/client has the front end code, which is the majority of the project. This uses React and CodeMirror to create the editor environment.
src/server has the server-side code, which reads the file system on start, write to the file system on code changes, and synchronizes changes between clients using ShareDB

Data comes from Gist:File Loading Script.

MIT Licensed

Similar vizzes

Loading thumbnail…

Portrait of React V2

This visualization uses a circle pack layout to map the hierarchical structure of the React source code, with each node’s radius proportional to its file size. Each circle is filled with a radial gradient, where file extensions map to distinct colors and directory depth maps to a grayscale. The D3 zoom behavior enables panning and scaling, while labels show truncated file names. Data is loaded from a remote JSON Gist, and memoization is handled through a custom `computed` utility inspired by React’s `useMemo`.

CCurran Kelleher

80% match

Loading thumbnail…

Black & White Nested Circles

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.

CCurran Kelleher

80% match

Loading thumbnail…

Code Tree Viz from Livestream

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.

CCurran Kelleher

80% match

Loading thumbnail…

Portrait of React

This visualization shows a circle pack view of the React source code, where each circle represents a file or directory, with size proportional to file size and color indicating file type (e.g., `.jsx` files in light blue). The interactive diagram supports zooming and panning via `zoom` behavior, and files are labeled, with tooltips showing full names. Data is fetched from a GitHub Gist, and rendering uses the D3.js `hierarchy`, `pack`, and `select` APIs within a React framework, with memoized computations for performance.

CCurran Kelleher

79% match

Loading thumbnail…

Circle Pack with Gradients

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.

CCurran Kelleher

78% match

Loading thumbnail…

Vue Circle Pack with Gradients

This example shows a zoomable circle packing visualization of the Vue.js core repository, where each circle represents a file or directory, sized by file size and colored by file extension. Hierarchical data is parsed with `d3.hierarchy` and `d3.pack`, while custom gradient definitions via SVG `radialGradient` elements enhance circle depth. Interactive pan and zoom is enabled through `d3.zoom`, with file sizes mapped to opacity using `d3.scaleLinear` and labels positioned with a monospace font.

CCurran Kelleher

77% match

Loading thumbnail…

Fork of Code Tree Viz from Livestream

This visualization presents a file structure as a circular packing diagram, with each file and directory represented by a circle sized according to its file size. It uses D3’s `hierarchy` and `pack` layout to compute positions, while a `scaleLinear` maps circle radii to font sizes for labels. File types are color-coded via a custom JavaScript object, with `fillColors` mapping extensions to specific colors, applied to circles filtered by file status. The data originates from a Vue Core repository gist, loaded via `fetch`, and renders in Svelte with SVG, using hover effects to increase circle opacity.

NNita

75% match

Loading thumbnail…

Fork of Code Tree Viz from Livestream

This visualization displays the file structure of a code repository as a bubble chart, where each file is a circle sized by its byte size and colored by file extension type. The data is loaded from a GitHub gist containing a JSON representation of the source tree, and a legend maps extensions to their corresponding colors. The chart uses D3's force simulation to arrange the circles, preventing overlap while labels show file names. The visualization is built using Svelte and leverages D3's `hierarchy` and `forceSimulation` APIs.

CCurran Kelleher

73% match