Fork of Fork of Radial Tree of Countries Hierarchy

100%

Fork of Fork of Radial Tree of Countries Hierarchy

✓ Published0🌍 Public

Last edited Nov 11, 2022

Created on Nov 11, 2022

Forked from 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.

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 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.

Llhjalex

97% 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

84% 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

83% match

Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

This radial tree visualizes the hierarchical relationships between world regions and their constituent countries. The data is loaded from a local JSON file and rendered as an SVG, with the root node placed at the center and branches extending outward. The visualization supports panning and zooming interactions through `d3.zoom`, allowing users to explore the hierarchy at different scales. Node labels are rotated and positioned based on their depth and angle, with font size scaling according to hierarchy level. The implementation builds on the `d3.cluster`, `d3.hierarchy`, and `d3.scaleSqrt` APIs.

KKinjal-Goyani

83% 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

83% 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

83% match

Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

This full-circle radial tree displays a hierarchical breakdown of world countries by continent and subregion, using a JSON dataset. The visualization supports panning and zooming through D3’s `d3.zoom` event handler. The layout is computed with `d3.cluster()` in a 360-degree arrangement, with curved link paths and nodes rendered as SVG circles. Text labels rotate radially to follow branch angles, with font size scaled by depth using `d3.scaleSqrt`. Distinct stroke colors and dash patterns differentiate hierarchy levels.

HHaili0109

83% 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

83% match