Skip to main content
SimilarExport ZIP
100%

File Listing Script

✓ Published0🌍 Public
CCurran Kelleher
Last edited May 22, 2024
Created on May 21, 2024

A 3D interactive visualization displays hierarchical file system structures as a branching tree of nodes. Each node represents a file or directory, with color and size mapping to file type and relative size. The visualization uses React for the user interface and WebGL for rendering, enabling smooth animation of the expanding and collapsing tree. Data is sourced from JSON files generated by a Node.js script that recursively walks a directory, capturing each file's metadata including size, last modification date, and extension.

AI-generated description

A NodeJS script that lists a file system tree in a JSON format compatible with 3d-hierarchy.

Similar vizzes

Loading thumbnail…

A

This interactive tree visualization displays hierarchical data from a JSON file using D3.js v5 and React. The visualization presents nodes as colored circles—green for parent nodes and red for leaf nodes—connected by animated horizontal links. Users can click on circles to collapse or expand subtrees, with smooth transitions updating the layout. The implementation uses d3.hierarchy, d3.tree, and d3.linkHorizontal for position calculations, while SVG elements and CSS transitions handle the rendering and animation effects.

Aamorenos25
73% match
Loading thumbnail…

Tree Example

This interactive tree diagram displays hierarchical data with collapsible nodes. The visualization uses the D3.js library (version 3.5.17) with a static JSON dataset containing a root node and its descendants. The code employs `d3.layout.tree` for layout computation and `d3.svg.diagonal` for link rendering. Users can click nodes to expand or collapse subtrees, triggering smooth animated transitions via D3's `.transition()` method. The SVG rendering includes styled circles and text labels, with nodes colored steelblue or lightsteelblue depending on collapsed state.

RRahulSai05
71% match
Loading thumbnail…

Tree Example

An interactive tree diagram displays hierarchical data with collapsible nodes, marking leaf nodes and internal nodes distinctly with text labels. Clicking a node toggles its child branches, with animated transitions repositioning nodes and links. The visualization uses D3.js 3.5.17, SVG rendering, and React via the VizHub framework, building the tree via `d3.layout.tree` and drawing curved diagonal links with `d3.svg.diagonal`.

JJonathan Liu
71% match
Loading thumbnail…

Tree

An interactive tree visualization displays a hierarchical dataset from flare.json, with collapsible nodes, color-coded status indicators, and breadcrumb navigation. The right panel shows user and token details for selected nodes. Implemented with React and D3 v3, it uses `d3.layout.tree`, `d3.svg.diagonal`, and `d3.behavior.zoom` for pan/zoom, with SVG rendering and animated transitions. Node colors reflect time-based status, and blinking effects highlight urgent items, while the interface supports expanding or collapsing all branches.

Ssrinivasjavvadi
71% match
Loading thumbnail…

Fork of Tree Example

This interactive tree diagram displays hierarchical data with expandable and collapsible nodes. Clicking a node toggles its children, animating the layout transitions. The example is built with React and D3.js, using the `d3.layout.tree` API and `d3.svg.diagonal` projections to draw curved links. The SVG rendering includes a 750ms transition animation for nodes and links as the tree structure changes. Custom data defines family relationships, with nodes styled as white circles with steelblue strokes.

BBaylife5
71% match
Loading thumbnail…

Tree layout

This example uses D3.js version 4 to render a hierarchical tree layout from CSV data. The visualization shows nodes connected by curved paths, where node labels display different data fields depending on their depth level. The tree uses `d3.tree()` to compute positions and `d3.hierarchy()` to structure the nested data. A React version is included, and an alternative HTML file demonstrates dynamic resizing with the `clientWidth` and `clientHeight` properties.

JJoe M
71% match
Loading thumbnail…

Family Tree

This visualization presents a family tree as an animated, zoomable node-link diagram. It reads hierarchical data from a JSON file and renders it as colored, clickable rectangles connected by labeled links, using D3.js v3 and React. The layout, computed via `d3.layout.tree`, supports interactive expansion and collapse of nodes, with tooltips and drag-to-pan functionality. The tree's size adjusts dynamically based on the data, and the code includes custom SVG definitions for arrows and drop shadows.

Ssathwikrajidi
70% match
Loading thumbnail…

React Starter

This example renders a hierarchical tree diagram as an interactive SVG visualization. Built with React and D3.js, the code uses the `hierarchy()` and `tree()` functions to process a JSON data structure, preparing it for layout before the `linkVertical()` path generator draws the connecting lines between nodes. The visualization displays the tree’s nodes as text labels, with font size varying by depth, and uses the `select()` API to append paths and text elements to the canvas. Data is fetched asynchronously from a local JSON file served in a public directory.

Ddavmaz
70% match