Fork of Code Tree Viz from Livestream

100%

Fork of Code Tree Viz from Livestream

✓ Published0🌍 Public

Last edited May 22, 2024

Created on May 22, 2024

Forked from 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.

AI-generated description

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

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

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

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

77% match

Loading thumbnail…

Fork of Fork of Fork of Cool graphics

This example presents multiple views of a git commit dataset, including an interactive circle graph where nodes represent authors and links indicate collaboration on shared repositories. It also includes bar charts and stacked bar charts for missing children data, which are rendered using SVG with D3 v7. The visualization uses `d3.rollups` to aggregate commit counts, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.zoom` for panning and zooming. Tooltips appear on hover, and the code uses `transition` for smooth interactions. Data is loaded from CSV files.

NNita

76% match

Loading thumbnail…

Fork of Bubble tree test

This visualization displays a hierarchical bubble tree of microbiology terms, using nested circles to represent taxonomic and structural relationships within the domain. The tool enables interactive zooming through circle clicks, with smooth animated transitions between hierarchy levels. Built with D3 v4's `d3.pack` layout, the code fetches JSON data from a GitHub repository, then applies `d3.interpolateZoom` and `transition.tween` for the zoom effect. Circles are colored by depth using an HSL color scale, and labels fade in and out based on the current focus node.

QQuinn Sebso

75% match

Loading thumbnail…

Fork of Fork of Fork of Cool graphics

This visualization gallery displays multiple D3.js v7 charts analyzing GitHub contributor data and crime statistics. The main visualization is a network graph showing author-repository collaboration patterns, with nodes positioned around a decorative Buddha path and animated meditation circles using SVG. The interconnected charts include bar charts for commit counts by author and repository, a stacked bar chart for missing children demographics, and various crime rate visualizations. The implementation uses D3's zoom behavior for panning/zooming, tooltips for hover details, and scaleOrdinal for color encoding across different datasets.

NNita

75% match

Loading thumbnail…

Fork of Fork of Cool graphics

This visualization gallery entry presents a collection of interactive charts for analyzing Git commit data and social indicators. The main view displays an author collaboration network using SVG circles and links, where node size represents commit counts and connections show collaborative repositories. Additional charts include bar charts for commit distribution by author and repository, created with D3.js v7 scales, axes, and zoom behaviors. The visualization uses hover tooltips for detailed data inspection and features multiple data processing techniques including d3.rollups and d3.stack for aggregating and structuring the underlying CSV datasets.

NNita

75% match