Klabbaparn

@Klabbaparn·12 public vizzes

World Countries Tree

This example visualizes a hierarchical file structure as a horizontal tree diagram. It uses D3.js (v5) to load JSON data, build a tree hierarchy, and render it as SVG paths and text labels, with node depth encoded in font size. Interactive zooming and panning are enabled through D3’s zoom and event APIs, while the styling uses the Playfair Display font.

Aug 10, 2020

Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of software project components, organized from a root "Release" node down through provisioning functions and services to individual source files. The layout uses a left-to-right tree structure with horizontal links, where text labels scale in font size based on their depth in the hierarchy. Built with D3 v5, the code employs the `tree` and `hierarchy` layouts, `linkHorizontal` for path generation, and the `zoom` behavior for panning and scaling, rendering data from a local JSON file as SVG elements.

Jul 26, 2020

Loading thumbnail…

World Countries Tree

This radial-like tree visualization displays a hierarchical dataset of software components and file paths, rendered as a horizontal dendrogram. The layout positions nodes by depth, with links drawn as curved paths. Built with d3 v5, it uses `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal`, and supports pan and zoom via `d3.zoom`. Node labels show component IDs with font sizes decreasing by depth, styled with the Playfair Display font. The code loads JSON data and renders everything as SVG elements.

Jul 26, 2020

Loading thumbnail…

World Countries Tree

This example renders a hierarchical dataset of software components as an interactive tree diagram. The visualization uses D3 v5’s `tree` layout and `linkHorizontal` generator to position nodes and draw curved links, with text labels sized inversely to depth. Pan and zoom are enabled via `d3.zoom`, applied to a group containing all elements. The code loads data from a local JSON file and renders entirely in SVG, providing an overview of product groupings from the "Release" root down through "gerrit-central" to individual activation paths.

Jul 24, 2020

Loading thumbnail…

World Countries Tree

This example displays a hierarchical tree of world countries, rendered as an SVG using D3 v5’s `tree` layout, `hierarchy`, and `linkHorizontal` path generator. The root node (“Release”) branches into functional areas like provisioning and activation, with leaf labels showing product or repository paths. Data is loaded from a local JSON file via `d3.json`, and the entire visualization supports pan and zoom through D3’s `zoom` event, which updates a transform on a container group. Text styling uses the Playfair Display font with a white shadow for readability.

Jul 24, 2020

Loading thumbnail…

World Countries Tree

This example displays a hierarchical tree of software components and projects, using a dataset of Ericsson product areas with nested submodules. The code loads `data.json`, applies the `d3.tree` layout, and renders the structure with SVG `path` elements and `text` labels. It uses `d3.hierarchy`, `linkHorizontal` for curved links, and `d3.zoom` for pan-and-zoom interaction. Font sizing decreases with node depth, and the styling relies on the Playfair Display typeface with a custom color for the links.

Jul 23, 2020

Loading thumbnail…

World Countries Tree

This visualization presents the hierarchical structure of world countries, organized by continent and subregion, as a horizontal tree diagram. The layout uses a `d3.tree` layout with `d3.hierarchy` and renders nodes as labels and edges as horizontal links via `d3.linkHorizontal`. Node text size decreases with depth, and the view supports zooming through a `d3.zoom` event handler. Data is loaded from a JSON file, styled with the Playfair Display font, and rendered as an SVG with a green stroke for connections.

Jul 23, 2020

Loading thumbnail…

World Countries Tree

This example presents a hierarchical tree visualization of a software release structure, with node labels like "ERICSSON DYNAMIC ACTIVATION 1" and "gerrit-central" that map to a custom data.json file. It uses the D3 v5 library with its `tree()` layout and `linkHorizontal()` generator to draw the branching connections as SVG paths. Labels are rendered as text elements sized by node depth, and the entire viewport supports interactive pan and zoom via D3’s `zoom()` behavior. The tree’s root is derived using `hierarchy()`, and the layout’s size is computed from the browser window’s dimensions.

Jul 23, 2020

Loading thumbnail…

World Countries Tree

This example displays a hierarchical tree visualization of world countries, with nodes arranged from a central root and connected by curved horizontal links. The text labels scale in size according to their depth in the hierarchy, and the entire diagram supports zooming and panning. Built with D3 v5, it uses the `tree` layout, `linkHorizontal` for path generation, and the `zoom` behavior, with data loaded from a JSON file and rendered as SVG elements styled with custom CSS.

Jul 23, 2020

Loading thumbnail…

World Countries Tree

This visualization shows a hierarchical tree of world countries, with nodes labeled by geographic and organizational identifiers and arranged horizontally across the screen. The text size decreases with each level of depth, and users can pan and zoom the entire structure. The code uses d3.hierarchy to process the data, d3.tree to compute the layout, and d3.linkHorizontal to generate the curved paths between parent and child nodes. Rendering is done via SVG elements, with zoom functionality provided by d3.zoom.

Jul 23, 2020

Loading thumbnail…

World Countries Tree

Jul 23, 2020

Loading thumbnail…

World Countries Tree

This example displays a hierarchical tree of world countries organized by continent and subregion, rendered as an SVG visualization. The data is loaded from a JSON file using `d3.json()`, then processed through `d3.hierarchy()` and `d3.tree()` to compute the layout. Nodes are labeled with country names, with font size scaling by depth, and links are drawn using `d3.linkHorizontal()`. Pan and zoom interactions are implemented with `d3.zoom()`, while hover effects are omitted.

Jul 21, 2020