Skip to main content
SimilarExport ZIP
100%

Radial Tree of Countries Hierarchy - Test

✓ Published0🌍 Public
BBoyka
Last edited May 31, 2023
Created on May 31, 2023

This example shows a radial tree layout of a hierarchical data structure, adapted from Curran Kelleher’s “World Countries Hierarchy” block. The code uses D3 v4’s `d3.cluster` and `d3.hierarchy` to compute node positions in a circle, then draws curved paths between parent and child nodes. Each node is rendered as an SVG text label, with font size scaled by depth via a `d3.scaleSqrt` transform. Panning and zooming interactions are enabled using D3’s `d3.zoom` behavior, which applies a transform to the SVG group. The data, a repeating set of object names and paths, is loaded from a local `data.json` file.

AI-generated description

Radial Tree Visualization of Countries Hierarchy. Has Panning and Zooming interaction.

Adapted from Curran Kelleher’s Block "World Countries Hierarchy".

MIT Licensed

Similar vizzes

Loading thumbnail…

Radial Tree of Countries Hierarchy Example

A radial tree visualization displays the hierarchy of world countries organized by continent and subregion. Built with D3 v4, it uses the `d3.cluster` layout and custom projection functions to position nodes in a circular arrangement. The visualization supports panning and zooming via `d3.zoom`, with interactive transforms applied to the SVG group. Node labels vary in font size based on depth, and curved paths connect parent-child relationships. The data comes from a local JSON file structured around geographic regions.

MMilan Košir
91% match
Loading thumbnail…

Radial Tree of Countries Hierarchy

This radial tree visualization displays a hierarchical organization of countries grouped by continent and subregion, with each leaf node labeled and connected by curved paths from a central root. The D3 v4 code uses `d3.cluster` to compute the tree layout, `d3.hierarchy` to parse the JSON data, and SVG paths for the links. Text nodes vary in size based on depth, and a zoom behavior with panning is enabled via `d3.zoom`. The data comes from a local `data.json` file containing the country hierarchy.

Ssunole896@yahoo.com
91% match
Loading thumbnail…

Radial Tree of Countries Hierarchy

This radial tree visualization displays the hierarchical structure of world countries, organized by continent and subregion, with leaf nodes representing individual nations. The D3 v4 `d3.cluster` layout positions nodes in a circular arrangement, while SVG paths connect parent and child nodes. Nodes are labeled with country names whose font size scales with depth using a `d3.scaleSqrt`. Panning and zooming are enabled through `d3.zoom`, and the data comes from the embedded `data.json` file.

CCurran Kelleher
90% match
Loading thumbnail…

Radial Tree of Countries Hierarchy

This radial tree visualization displays a hierarchical structure of country records and their associated rules, such as "Incoming." The root node sits at the center, with branches extending outward to represent child nodes at varying depths. The visualization uses a circular layout where the radial position indicates hierarchical level, and the size of text labels decreases with depth. The implementation uses the D3 v4 library, specifically the `d3.cluster` and `d3.hierarchy` APIs to compute the radial tree layout. It features pan and zoom interactions through the `d3.zoom` function, which updates the SVG group's transform attribute. Data is loaded from an external JSON file, and the tree is rendered as SVG paths for links and circles with text labels for nodes. The code also applies a custom glow effect to text labels using CSS text-shadow properties.

FFarzand-e-Ali
90% match
Loading thumbnail…

Radial Tree of Countries Hierarchy

A radial tree visualization displays the hierarchical relationship of countries grouped by continent and subregion. The code uses d3.json to load the data, d3.hierarchy to build the tree structure, and d3.cluster to compute the layout. Panning and zooming interactions are implemented with d3.zoom. SVG paths connect parent nodes to children with curved links, and text labels show country names with font sizes scaled by tree depth.

FFarzand-e-Ali
90% match
Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

This radial tree visualizes the hierarchical structure of world countries, organized by continent and subregion, using data from `data.json`. Built with D3 v4, it renders an SVG and supports panning and zooming via the `d3.zoom` interaction. The tree layout is computed using `d3.hierarchy` and `d3.cluster`, with links drawn as curved paths. Text labels use font sizes scaled by depth, and the layout is adapted from Curran Kelleher’s World Countries Hierarchy block.

CComplicated Phenomenon
90% match
Loading thumbnail…

Radial Tree of Countries Hierarchy

This radial tree visualization displays a hierarchical organization of countries grouped by continent and subregion, with the World at the root and individual nations as leaves. The code uses d3.cluster and d3.hierarchy to compute the radial layout, rendering SVG paths for links and text labels for nodes. Interactive panning and zooming is implemented with d3.zoom, while label rotation and font sizes vary by depth level. The data comes from a JSON file with nested children arrays, and the design includes a subtle glow effect on non-leaf labels.

LLeuvenZuid
90% match
Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

This radial tree visualization displays a hierarchical breakdown of world countries by continent and subregion, with each node labeled by name and scaled by depth. The layout uses a D3 cluster layout, projecting nodes in a circular arrangement from a central root. Users can pan and zoom the SVG canvas via d3.zoom. The data, loaded from a JSON file, is structured hierarchically, and the code adapts Curran Kelleher’s original block by adjusting link paths and text rotation for readability.

Llizard1111
89% match