Skip to main content
SimilarExport ZIP
100%

Sbom Viewer

✓ Published0🌍 Public
ZzolboBatsaikhan
Last edited Sep 20, 2022
Created on Sep 2, 2022

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.

AI-generated description

SBOM viewer

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
84% match
Loading thumbnail…

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.

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
75% 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
70% match
Loading thumbnail…

Tree 7

This interactive tree diagram displays a hierarchical bill of materials, starting from a root part number and expanding into multiple branches of subcomponents and part numbers. Using the D3.js library (version 3.5.17) with an SVG rendering, the visualization loads JSON data from `xt_tree.json` and presents it with a tidy tree layout. Nodes are clickable, allowing users to collapse or expand child nodes with smooth animated transitions via `d3.layout.tree` and `diagonal` path generators.

Nnadia-el
70% 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
69% match
Loading thumbnail…

computer tree

This interactive tree diagram visualizes a hierarchical dataset of computer components and software modules. Users can click nodes to expand or collapse their children, revealing nested categories like hardware, data converters, and query methods. The visualization uses D3.js v6, rendering as an animated SVG with smooth transitions between states. The tree layout positions nodes horizontally, with links drawn as diagonal paths connecting parent and child elements. The code employs fundamental D3 methods including `d3.hierarchy`, `d3.tree`, `d3.linkHorizontal`, and `d3.zoom` to handle layout, interaction, and viewport control.

Jjody-otbi
65% 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
65% match