Skip to main content
SimilarExport ZIP
100%

Fork of Radial Tree of Countries Hierarchy

✓ Published2🌍 Public
Llhjalex
Last edited Aug 24, 2022
Created on Aug 24, 2022

This radial tree visualization displays a hierarchical dataset of Korean food categories and dishes, with the root node at the center and branches extending outward. The code uses d3.hierarchy and d3.cluster to compute the tree layout, then renders SVG paths for links and text labels for nodes. Panning and zooming are enabled through d3.zoom, and text font sizes scale with node depth using d3.scaleSqrt. The project function maps polar coordinates to Cartesian positions, while leaf labels rotate and adjust text-anchor based on their angular position.

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 Fork of Radial Tree of Countries Hierarchy

This radial tree visualization displays a hierarchical dataset of Korean food categories and dishes, with nodes arranged in concentric circles around a central root. The code uses the `d3.cluster` layout to position nodes, `d3.hierarchy` to structure the data, and `d3.zoom` to enable panning and zooming interactions. SVG paths and text elements render the tree, with font sizes varying by depth level. The visualization adapts a radial tree structure to present the culinary taxonomy, with branch labels rotated to align with their angular position.

Qqwxyyigesm
97% 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
87% match
Loading thumbnail…

Fork of Fork of Radial Tree of Countries Hierarchy

This radial tree visualization displays a hierarchical dataset of countries, organized by regions under a top-level "News" category. The code uses d3.cluster and d3.hierarchy to compute the layout, with SVG paths drawing curved links between parent and child nodes. Leaves and internal nodes are labeled with country and region names, using d3.scaleSqrt to vary font size by depth. The tree supports interactive panning and zooming via d3.zoom, transforming the entire graph group. Data comes from a local data.json file.

Eericliu6178@gmail.com
86% match
Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

This radial tree visualizes the hierarchical relationships between world countries, grouped by continent and subregion. Using D3.js v4, it renders a circular cluster layout where nodes are positioned by angle and radius. The visualization reads a nested JSON file and uses `d3.cluster` to compute positions, `d3.hierarchy` to process the tree structure, and `d3.zoom` to enable panning and zooming interactions. The code uses `project()` for polar-to-Cartesian conversion and styles text with different font sizes and rotations based on depth.

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

Fork of Radial Tree of Countries Hierarchy

A radial tree visualization displays the hierarchical structure of countries, organized by world region and subregion. The diagram, rendered as an SVG, places the root at the center with branches extending outward. Users can pan and zoom the view. The code uses the D3.js `d3.cluster` layout to position nodes based on angle and radius. It reads the hierarchy from a JSON file and uses `d3.hierarchy` to build the tree structure. Text labels are rotated and styled according to their depth in the tree.

LLeon
86% 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
85% 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
85% match