RADIAL TREE

100%

✓ Published2🌍 Public

Last edited Mar 22, 2020

Created on Mar 22, 2020

Forked from Radial Tree of Countries Hierarchy

This radial tree visualization displays a hierarchical dataset of world countries, organized by continent and subregion. Built with D3 v4, it uses the `d3.cluster` layout to position leaf nodes around a circular arc, with curved `path` links connecting parent and child nodes. The SVG rendering includes size-scaled text based on node depth and supports panning and zooming via `d3.zoom`. Node labels are rotated adaptively for readability, and a glow effect is applied to non-leaf labels via CSS `text-shadow`. The data is loaded from a JSON file using `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…

RADIAL TREE

A radial tree displays a hierarchy of world countries, organized by continent and subregion, radiating outward from a central root node. The visualization uses an SVG rendering with D3 v4’s `d3.cluster` layout to position nodes, and custom bezier paths for links. Text labels are rotated and sized by depth, with a heavy white glow for readability. Panning and zooming are implemented via `d3.zoom`, while the JSON data structure defines the nested country groupings.

Nnadia-el

95% match

Loading thumbnail…

RADIAL TREE

This visualization shows the hierarchical structure of world countries organized by continent and subregion, displayed in a radial tree layout. The data comes from a JSON file containing country names grouped into regional categories. Built with D3 v4, the code uses `d3.cluster` and `d3.hierarchy` to compute the radial positions, while `d3.zoom` enables panning and zooming. Labels are rotated and positioned based on depth, with larger fonts for higher-level nodes, and rendered as SVG text with a glow effect.

WW9183907

95% match

Loading thumbnail…

RADIAL TREE Template

This radial tree visualization displays a hierarchical view of world countries, organized by continent and subregion. It shows the structure of geographic data, from the "World" root down to individual countries, with text labels positioned radially around the center. The visualization uses D3.js v4, specifically the `d3.cluster()` layout algorithm and `d3.zoom()` for pan and zoom interactions, rendering as SVG. Text size scales with depth using `d3.scaleSqrt()`, and the data is loaded via `d3.json()` from a static JSON file.

LLex

94% match

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 the hierarchical relationship of world countries, organized by continent and subregion, with the root node "World" at the center. The layout uses D3's `d3.cluster` to position nodes radially, and SVG paths connect parent and child nodes with curved links. Text labels show country and region names, with font sizes scaled according to depth using `d3.scaleSqrt`. Users can pan and zoom the entire visualization via `d3.zoom`, which applies an SVG transform to the containing group. Data is loaded from a local JSON file.

Ttristramshandy322

91% match

Loading thumbnail…

Radial Tree

A radial tree displays a hierarchical dataset of world countries, branching outward from a central root with nodes arranged by depth. The visualization supports panning and zooming to explore the structure. Built with D3 v4, it uses `d3.stratify` to parse the data, `d3.tree()` with a radial layout, and `d3.linkRadial` for curved links. Node labels rotate based on depth and angle, with font sizes decreasing for deeper levels. The scene is rendered as SVG within a fixed-size viewport.

LLex

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. Built with d3.v4, it uses the d3.cluster layout to position nodes in a circular arrangement, with SVG paths connecting parent and child nodes. The visualization supports panning and zooming interactions through d3.zoom, and text labels are rotated and sized based on their depth within the hierarchy, with the data sourced from a nested JSON file.

Jjamesbnorman

91% match

Loading thumbnail…

Radial Tree of Countries Hierarchy

This visualization presents a radial tree of countries organized by continent and subregion, with the hierarchy derived from JSON data. The layout uses `d3.cluster` to position nodes in a circular arrangement, with curved links drawn as SVG paths. Text labels display each country or region name, with font sizes scaled by depth using `d3.scaleSqrt`. Panning and zooming are implemented through `d3.zoom`, which applies transformations to the SVG group containing all elements. The design adapts Curran Kelleher’s original block, rendering all content as SVG elements within a fixed viewport.

JJoe M

91% match