Code Tree Viz from Livestream

100%

Code Tree Viz from Livestream

✓ Published5🌍 Public

Last edited May 28, 2024

Created on May 22, 2024

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.

AI-generated description

A circle pack visualization of the Vue Core source code.

Data comes from Gist:File Loading Script.

MIT Licensed

Similar vizzes

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

92% 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

89% match

Loading thumbnail…

VZCode Source Tree

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.

CCurran Kelleher

80% match

Loading thumbnail…

Force Layout on Directory Circles

This visualization displays the file structure of a Vue project as a collection of colored circles, each sized according to file size and colored by file extension. The circles are positioned using d3.forceSimulation with forceCollide to prevent overlap, with file names rendered as text labels. Data loads from a remote JSON URL, and the visualization uses D3’s hierarchy to parse the nested structure before rendering circles and text in an SVG.

EEJ Fox

77% match

Loading thumbnail…

Git Source Tree Radial Visualization Example

This interactive visualization displays the file structure of a Git repository as a radial tree, with branches and nodes colored by file extension. The code uses d3.hierarchy and d3.tree to compute the layout, while d3.zoom enables pan and zoom. A custom bar chart, built with d3.legendColor, lists file types and their counts. The data originates from a CSV hosted on VizHub, rendered with SVG paths and transitions.

MMilan Košir

76% match

Loading thumbnail…

Git Source Tree Radial Visualization

This visualization displays the file structure of a Git source tree as a radial tree with links extending from a central root, colored by file extension. The layout uses d3.tree with a radial projection, while a linked bar chart lists the most common file extensions with counts. It includes zoom and pan functionality via d3.zoom, animated transitions, and a color legend from d3-legend. The data comes from a JSON dataset fetched from VizHub, rendered with SVG paths and elements.

CCurran Kelleher

74% 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

74% match

Loading thumbnail…

Tree Visualization

This tree visualization displays hierarchical data as a node-link diagram with circular nodes and connecting links, rendered as an SVG on a 600x600 canvas. The code uses D3 v5, loaded via UNPKG, to select the SVG container and draw the structure, while CSS styles the node circles with a steelblue stroke and the links in light gray. The visualization demonstrates importing D3 functions and local ES6 modules through VizHub, though the specific dataset is not visible in the provided files.

VVenkat-Sumith-Thota

74% match