Skip to main content
100%

Radial Tree of Countries Hierarchy

✓ Published0🌍 Public
FFarzand-e-Ali
Last edited Mar 17, 2020
Created on Mar 11, 2020

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.

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