Skip to main content
SimilarExport ZIP
100%

sbom with name and zoom

✓ Published2🌍 Public
ZzolboBatsaikhan
Last edited Oct 20, 2022
Created on Sep 6, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of sbom with name and zoom 1

This interactive visualization displays a hierarchical tree of an SPDX software bill of materials (SBOM), showing package files and their associated checksums. The D3 v5 code uses d3.tree and d3.hierarchy to compute the layout, with nodes colored blue or cyan to distinguish parent from leaf nodes. Users click nodes to collapse or expand branches, with smooth transitions animating the repositioning. Names appear truncated along edges, while hovering over nodes reveals full details in a tooltip. The SVG rendering supports zooming and panning through d3.zoom.

ZzolboBatsaikhan
87% match
Loading thumbnail…

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.

ZzolboBatsaikhan
82% match
Loading thumbnail…

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.

ZzolboBatsaikhan
81% match
Loading thumbnail…

Tree

This visualization displays a hierarchical tree derived from a JSON data file, showing the structure of a model named "HOBS" with its contained classes, attributes, and relationships. The tree layout is generated using D3's `tree` and `hierarchy` functions, with links drawn via the `linkVertical` path generator. The interactive viewport supports zooming through D3's `zoom` event handler, with an `event.transform` applied to the SVG group. Each node renders as a text label positioned by its calculated coordinates, using the Playfair Display font.

MMTR
71% match
Loading thumbnail…

Tree

This interactive tree diagram visualizes a hierarchical dataset, displaying nodes as colored boxes connected by labeled links with directional arrows. The layout renders synchronously in SVG and supports zooming and dragging via `d3.behavior.zoom`. Node colors map to `type` fields, and tooltips appear on hover, while link direction (SYNC or ASYN) is shown through arrow markers. Data loads from JSON using `d3.json`, and the layout uses `d3.layout.tree` with a `breadthFirstTraversal` to adjust SVG dimensions dynamically.

Uusamazaibabbasi
71% match
Loading thumbnail…

Tree6

A radial tree visualization displays the hierarchical Bill of Materials (BOM) for an Xmas-Tree product, with nodes positioned in a circular layout and connected by curved links. The visualization uses D3 v4's `d3.cluster` layout to compute angular and radial positions, then renders the structure as SVG paths and circles. Node labels rotate based on their angular position, and the entire visualization supports pan and zoom via `d3.zoom`. The data comes from a JSON file representing the product's component hierarchy.

Nnadia-el
71% match
Loading thumbnail…

Untitled

This example demonstrates an interactive, zoomable tree diagram built with D3.js, presenting hierarchical data from a JSON file. Users can pan and zoom the tree, as well as drag and drop nodes to rearrange them, with animations using `d3.layout.tree` and `d3.svg.diagonal`. The code includes custom panning logic and a zoom listener with scale constraints, rendering the visualization as SVG elements with linked paths and draggable node circles.

Ppo-drik
70% match
Loading thumbnail…

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.

ZzolboBatsaikhan
69% match