Fork of Costa Rica

100%

Fork of Costa Rica

✓ Published0🌍 Public

Last edited Oct 19, 2021

Created on Oct 19, 2021

This radial tree visualization displays a hierarchical dataset of countries organized by continent and subregion, rooted at “PlaceMaking Pedagogy.” The D3 v4 code uses `d3.cluster` to compute the radial layout and `d3.zoom` for panning and zooming. Each node is rendered as an SVG text label with size scaled by depth. The project function converts polar coordinates to Cartesian positions, with curved links drawn using SVG path commands, and the data is loaded from `data.json` 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…

Costa Rica

This radial tree visualization displays a hierarchical World→Asia→subregion→country structure using an SVG rendering with d3.cluster layout. The view supports panning and zooming through d3.zoom, allowing exploration of the dense country hierarchy. Node labels at third depth levels orient tangentially around the circle, while shallower levels remain horizontal, with font sizes scaled by depth via d3.scaleSqrt. The data originates from data.json, mirroring Curran Kelleher’s World Countries Hierarchy block, with teal links drawn as cubic Bézier curves connecting parent-child nodes.

Pporrasgp

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

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

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

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

86% match

Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

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.

Aape-ape-ape

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

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

85% match