Skip to main content
SimilarExport ZIP
100%

Fork of Radial Tree of Countries Hierarchy

✓ Published0🌍 Public
Aape-ape-ape
Last edited Jan 7, 2022
Created on Jan 7, 2022

The visualization shows a radial tree of country hierarchies, with continents branching into subregions and individual countries around the center. User interaction includes panning and zooming across the SVG canvas. The code uses D3 v4’s `d3.cluster`, `d3.hierarchy`, and `d3.zoom` APIs to layout the hierarchical data, draw curved link paths, and apply text rotation based on angular position. Data comes from a JSON file containing nested continent-region-country entries.

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

Fork of Radial Tree of Countries Hierarchy

This radial tree visualization displays a hierarchical breakdown of world countries organized by continent and subregion, with each node labeled at its corresponding depth level. The visualization supports panning and zooming through the `d3.zoom` API, which applies transforms to the SVG group element. The code uses `d3.cluster()` to compute node positions in a circular layout and `d3.scaleSqrt` to size the text based on tree depth. Links draw as curved paths for deeper nodes, while leaf nodes align text to the outer edge for readability. The data originates from a JSON file containing the full country hierarchy.

RRashi Tyagi
94% 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
94% 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
94% match
Loading thumbnail…

Fork of Fork of Radial Tree of Countries Hierarchy

This radial tree visualizes the hierarchical relationship of world countries, organized by continent and subregion, with country names displayed at varying font sizes based on depth. The visualization, built with D3 v4, uses `d3.cluster` and `d3.hierarchy` to compute the radial layout, while a custom `project` function converts polar coordinates to Cartesian positions for SVG rendering. Panning and zooming are enabled via `d3.zoom`, and node labels are rotated or aligned dynamically based on their angular position. The data comes from a local `data.json` file containing the country hierarchy.

JJoaquin Castañon
94% match
Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

A radial tree diagram visualizes the hierarchy of world countries, grouped first by continent and then by subregion. The visualization uses a D3 v4 cluster layout, with SVG paths depicting connecting links and text labels for each country. The code employs `d3.hierarchy`, `d3.cluster`, and `d3.zoom` to enable panning and zooming of the entire diagram. Data is loaded from a local `data.json` file and rendered with a linear gradient of font sizes based on depth in the hierarchy.

NNita
93% 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. The visualization uses a circular layout with connecting bezier curves, where text labels are rotated and positioned according to their depth in the hierarchy. The code implements interactive panning and zooming through `d3.zoom`, while the tree layout is computed using `d3.cluster`. Text sizing scales with depth using `d3.scaleSqrt`, and the SVG rendering includes a glow effect on labels for improved readability.

FFereidoun Mianji
93% match