Fork of World Countries Tree

100%

Fork of World Countries Tree

✓ Published0🌍 Public

Last edited Sep 22, 2022

Created on Sep 6, 2022

Forked from Prac1

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.

AI-generated description

load data

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of World Countries Tree

A fork of the World Countries Tree example displays a hierarchical dataset as a horizontal tree layout, with node labels and curved links rendered as SVG elements. The visualization uses D3 v5’s `tree` layout, `hierarchy`, and `linkHorizontal` path generator to position nodes and draw edges, while the `zoom` behavior enables panning and scaling of the entire graph. Data is loaded from a local `data.json` file, and node labels are styled with a Playfair Display font and white text shadow.

Ssmeiyin

85% match

Loading thumbnail…

Fork of World Countries Tree

This example displays a hierarchical tree from a JSON dataset, with nodes labeled and connected by curved links whose stroke thickness varies with child data size. It uses D3.js v5, including the `tree` layout, `hierarchy` for data nesting, and `linkVertical` for path generation. The SVG rendering is controlled via `select`, with zoom functionality integrated through the `zoom` and `event` APIs. Text labels use a Playfair Display font, styled with a white shadow effect from CSS.

DDamian Grzanka

84% match

Loading thumbnail…

Fork of World Countries Tree

This example visualizes a hierarchical tree of function calls from a C codebase, with the root “main” branching into manager functions and their nested subroutines. The data, loaded from a JSON file, is displayed using D3 v5’s `tree` layout and `hierarchy` function, with nodes connected by `linkHorizontal` paths. Panning and zooming are enabled via `d3.zoom`, and the SVG text labels carry file paths and function names. The visual uses a teal stroke and serif typography to present the call graph clearly.

Iidohadoker

84% match

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by region and subregion, using a horizontal node-link layout. The code renders the structure with SVG paths and text labels, applying D3’s `tree()` layout, `hierarchy()`, `linkHorizontal()`, and `zoom()` for pan and zoom interactions. Data is loaded from a JSON file containing nested country groupings, with label font size decreasing by depth. The visualization uses a custom Playfair Display font and subtle text shadows for readability.

DDamian Grzanka

83% match

Loading thumbnail…

Fork of World Countries Tree

A hierarchical tree visualization displays countries organized by continent and subregion, with the world as the root. The layout positions nodes horizontally by depth, and text size decreases with each level. D3 v5’s `tree` layout, `hierarchy`, and `linkHorizontal` generate the SVG paths and labels, while a `zoom` behavior enables pan and scaling. The data comes from a JSON file, and text styling uses the Playfair Display font.

DDamian Grzanka

83% match

Loading thumbnail…

Fork of World Countries Tree

This visualization shows a hierarchical tree of world countries, organized from continents down to subregions and individual nations, using a horizontal dendrogram layout. Labels appear at each node, with font size decreasing by depth to emphasize higher-level groupings. The implementation uses D3 v5’s `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` to compute the layout and draw SVG paths, while `d3.zoom` enables panning and zooming. Styling relies on a Playfair Display font and teal connection lines, with data loaded from a local JSON file.

Ffkukcha

83% match

Loading thumbnail…

Fork of World Countries Tree1

This visualization presents a radial tree layout of world countries, hierarchically organized by continent and subregion, with each country displayed as a text label. The tree expands from a central "World" root node, with connecting curved links rendered as green paths. Using D3 v5, the code employs `d3.tree()`, `d3.hierarchy()`, and `d3.linkHorizontal()` to compute and draw the layout. Labels are sized inversely to their depth in the hierarchy, with deeper nodes rendered smaller. Data comes from a local `data.json` file, and the SVG output is styled using the Playfair Display font.

MMichael Khomyarchuk

83% match

Loading thumbnail…

Fork of World Countries Tree

This fork of the world countries tree visualizes the hierarchical structure of global regions, subregions, and countries from a JSON dataset. It renders a horizontal dendrogram in SVG, with each country as a leaf node labeled by name. The code uses d3.hierarchy, d3.tree, and d3.linkHorizontal to compute and draw the layout, while d3.zoom enables pan and zoom interactions. Text styling and font sizes adjust based on node depth, with a Playfair Display font applied throughout.

FForemost123

83% match