HW3_111

100%

✓ Published0🌍 Public

Last edited Nov 19, 2022

Created on Nov 19, 2022

Forked from Radial Tree of Countries Hierarchy

This radial tree visualization displays the hierarchical structure of world countries, organized by region and subregion, with interactive panning and zooming enabled through `d3.zoom`. The code uses `d3.hierarchy` and `d3.cluster` to compute node positions, with curved paths drawn via SVG `path` elements. Node labels are rotated tangentially and vary in font size based on depth, while white text shadows improve readability. The visualization adapts Curran Kelleher’s block, rendering the hierarchy from a JSON data file.

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

87% match

Loading thumbnail…

Radial Tree of Countries Hierarchy - Test

This example shows a radial tree layout of a hierarchical data structure, adapted from Curran Kelleher’s “World Countries Hierarchy” block. The code uses D3 v4’s `d3.cluster` and `d3.hierarchy` to compute node positions in a circle, then draws curved paths between parent and child nodes. Each node is rendered as an SVG text label, with font size scaled by depth via a `d3.scaleSqrt` transform. Panning and zooming interactions are enabled using D3’s `d3.zoom` behavior, which applies a transform to the SVG group. The data, a repeating set of object names and paths, is loaded from a local `data.json` file.

BBoyka

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

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

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

86% match

Loading thumbnail…

Radial Tree of Countries Hierarchy

This radial tree shows the hierarchical structure of countries grouped by continent and subregion, with the root node "World" at the center. It renders a clustered dendrogram using D3 v4’s `d3.cluster` layout, drawing curved SVG paths for links and text labels for each node. The visualization supports zooming and panning via `d3.zoom`, and adjusts label size and rotation based on depth and angle. Data is loaded from a JSON file representing the geographic hierarchy.

MManinder Singh

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

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

86% match