Fork of sbom with name and zoom 1

Fork of sbom with name and zoom

This interactive visualization displays a hierarchical tree of SPDX software package data, showing the structure of a PowerShell package with its associated files and checksums. Users can click on nodes to expand or collapse branches, with a smooth animated transition that adjusts the tree layout accordingly. The visualization uses D3.js v5 with a custom tree layout algorithm, linkHorizontal connectors for the edges, and a zoom feature that responds to user interaction. The animated transitions between states are implemented using D3's transition system with adjustable durations based on modifier keys.

92% match

sbom with name and zoom

This interactive visualization displays a tree diagram representing a software bill of materials (SBOM) for PSReadLine, with nodes labeled by name and supporting zoom functionality. It shows the hierarchical relationships between the document, packages, files, and their checksums. The code loads hierarchical JSON data via `d3.json`, builds the tree layout with `tree().size()` and `hierarchy()`, and draws horizontal links with `linkHorizontal()`. Pan and zoom are implemented using a `zoom()` event that updates the SVG group's transform. All rendering occurs as SVG paths and text elements, with a Playfair Display font for labels.

87% match

Sbom Viewer

This visualization displays the hierarchical structure of a Software Bill of Materials (SBOM) as a tree layout, showing package files and their associated SHA-1 and SHA-256 checksums. The example loads hierarchical data from a local JSON file and uses d3.json to parse it, though the current implementation only logs the root node’s name to the console. The SVG container size is dynamically set to match the browser window dimensions using document.body dimensions, with the d3 library version 7.6.1 loaded from a CDN.

84% match

Fork of World Countries Tree

This example displays a hierarchical tree visualization of an SPDX software bill of materials, showing the PSReadLine package with its individual files and their corresponding SHA-1 and SHA-256 checksum values. The tree layout is rendered using D3 v5 with SVG elements, connecting nodes with horizontal link paths generated by `linkHorizontal`. Data is loaded from a local JSON file using `json()`, while the hierarchy structure is processed through `hierarchy()` and the tree layout function. The visualization uses a Playfair Display font with a fixed viewport and custom margins.

73% match

Fork of D3.js collapsible tree with boxes

This interactive visualization presents a hierarchical tree of nodes as boxes, rendered with SVG and animation. Users can click nodes to collapse or expand branches, with links and arrows indicating relationships, styles, and direction (SYNC or ASYN) between parent and child elements. The chart uses D3.js v6’s `d3.tree` layout, `d3.zoom` for pan and zoom, and transitions for smooth updates. JSON data defines node types, labels, versions, and link metadata, which also drive color-coding of boxes and tooltip text on hover.

JJunaid Ahmed Jameel

Fork of D3.js collapsible tree with boxes

This interactive visualization displays a hierarchical tree structure as collapsible boxes, with each node representing a named entity and its connections labeled with synchronization details (SYNC or ASYN). Built with D3.js v3 and jQuery, the tree uses SVG rendering and animated transitions for expand/collapse interactions. The code implements custom layout calculations, including collision detection to prevent node overlap, and enhances usability with zoom and drag capabilities via `d3.behavior.zoom`, while tooltips provide additional node information. Data is loaded from a JSON file defining the tree structure and node attributes like type and version.

SSonuSriN

Fork of D3.js collapsible tree with boxes

This example presents a collapsible tree diagram rendered as colored boxes, with each node displaying a label, version, and type. It uses D3.js v3 with the `d3.layout.tree` API and SVG elements to create an interactive hierarchy, where clicking a node expands or collapses its children. The tree is initialized from a JSON file that contains the node hierarchy, including link names and directions. The code includes features such as zooming and dragging through `d3.behavior.zoom`, and it dynamically adjusts the SVG dimensions based on the tree's depth and maximum width.

Bbhargavarathod

Fork of D3.js collapsible tree with boxes

This fork of the D3.js library presents a collapsible tree diagram where each node is a box displaying labels, versions, and link directions. The hierarchy, loaded from a JSON file, is rendered as an SVG with animated expand and collapse transitions on click. The implementation uses `d3.layout.tree`, `d3.behavior.zoom` for pan and zoom, and custom arrow definitions to connect the boxes. Tooltips reveal additional node details, and colored rectangles distinguish the node types.

NNguyễn Thành Công