Skip to main content
SimilarExport ZIP
100%

Fork of Radial Tree of Countries Hierarchy

✓ Published0🌍 Public
AAbdul Majeed
Last edited Jan 5, 2024
Created on Jan 5, 2024

This fork of Curran Kelleher’s World Countries Hierarchy block shows a radial tree of geographic regions, with the root node labeled "SB" and leaves labeled Asia, Europe, and Africa repeated many times. The SVG visualization uses d3.cluster to compute the radial layout and d3.zoom for panning and zooming interactions. Node labels are sized by depth and rotated for readability, while links are drawn as cubic Bézier curves. The data is loaded from a local JSON file via d3.json.

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…

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

Fork of Radial Tree of Countries Hierarchy

This fork of Curran Kelleher’s radial tree visualizes a hierarchy of world countries, grouped by continent and subregion, with labels placed along circular branches. Users can pan and zoom the entire SVG scene using `d3.zoom` and `d3.event.transform`. The code builds the layout with `d3.cluster` and `d3.hierarchy`, projects nodes via a custom `project` function, and sizes text with `d3.scaleSqrt` based on depth. The underlying data is loaded from `data.json` using `d3.json`.

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

Fork of Radial Tree of Countries Hierarchy

This radial tree visualization shows the hierarchical structure of world countries, organized by continent and subregion, with each country as a leaf node. The circle-packing layout positions nodes radially, and the code uses `d3.hierarchy` and `d3.cluster` to compute the layout, with `d3.zoom` enabling pan and zoom interactions on the SVG. Link paths are generated manually via a projection function, and text labels adjust rotation and anchor based on depth and angle, with font size scaled by depth.

Ccheikh.m.m.thiaw@aims-senegal.org
89% match
Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

This radial tree visualization displays a hierarchical structure of world countries, categorized by continent and subregion, with the depth of each node conveyed through font size. The tree is rendered as an SVG using d3.cluster, with curved links connecting parent and child nodes and text labels positioned radially around the center. The visualization supports panning and zooming via d3.zoom, which applies a transform to the entire tree group. Data comes from a local JSON file, and the text often includes a white glow effect for readability against the background.

JJoaquin Castañon
89% match
Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

A radial tree shows the hierarchical organization of countries by continent and subregion, branching outward from a central "World" root. D3’s cluster layout computes angular and radial positions, while SVG paths connect parent-child nodes. Panning and zooming are enabled via d3.zoom. Node labels use hue-free teal links and font sizes scaled by depth, with text rotation applied for deep leaves. Data comes from a JSON hierarchy.

NNelson Ameyo
89% match
Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

This radial tree visualization displays a hierarchical organization of countries grouped by continents and subregions, with each country name positioned along circular branches radiating from a central "World" node. The code uses d3.hierarchy and d3.cluster to compute the tree layout, then projects node positions into polar coordinates for the radial arrangement. SVG paths with bezier curves connect parent and child nodes, while text labels employ font sizing based on depth and rotation for smaller branches. Panning and zooming are enabled through d3.zoom, applied to an SVG group containing all links and labels.

AAamir Hameed mir
89% match
Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

This radial tree visualization displays the hierarchical structure of world countries, organized by continent and subregion. It uses a circular layout where leaf nodes representing individual countries are positioned at the outer ring, with intermediate labels for continents and regions shown with larger fonts. The visualization supports interactive panning and zooming through the `d3.zoom` API, which updates an SVG group’s transform based on user gestures. The tree layout is computed using `d3.hierarchy` and `d3.cluster`, with links drawn via cubic Bézier curves and text labels rotated to follow the radial orientation. Data comes from a local JSON file (`data.json`) containing the full country hierarchy.

Aape-ape-ape
89% match