Learning D3.js

100%

Learning D3.js

✓ Published0🌍 Public

Last edited May 28, 2020

Created on May 23, 2020

This example shows an interactive radial dendrogram of country population data, rendered as SVG. The visualization uses `d3.cluster` to compute a circular tree layout, with leaf nodes labeled by country name and sized by text depth. Pan and zoom are implemented via `d3.zoom` on a background rectangle, transforming the containing `<g>` element. The code loads hierarchical data from `countryHierarchy.json` and projects node positions using trigonometric functions to map tree coordinates to a radial polar layout.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

81% match

Loading thumbnail…

RADIAL TREE

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

Ccocktaildata

81% match

Loading thumbnail…

d3 tree

A radial tree diagram displays a hierarchical dataset of world regions and countries, with nodes positioned by depth and branches extending outward. The visualization uses D3.js v5 to parse the JSON data and render the structure as an SVG, with text labels for each node. The code applies `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` for layout, and includes zoom interaction via `d3.zoom` to navigate the tree.

GGokulkrishnan1996

81% match

Loading thumbnail…

Radial Tree of Countries Hierarchy

This radial tree visualization displays a hierarchical structure of country records and their associated rules, such as "Incoming." The root node sits at the center, with branches extending outward to represent child nodes at varying depths. The visualization uses a circular layout where the radial position indicates hierarchical level, and the size of text labels decreases with depth. The implementation uses the D3 v4 library, specifically the `d3.cluster` and `d3.hierarchy` APIs to compute the radial tree layout. It features pan and zoom interactions through the `d3.zoom` function, which updates the SVG group's transform attribute. Data is loaded from an external JSON file, and the tree is rendered as SVG paths for links and circles with text labels for nodes. The code also applies a custom glow effect to text labels using CSS text-shadow properties.

FFarzand-e-Ali

80% match

Loading thumbnail…

Radial Tree of Countries Hierarchy

A radial tree visualization displays the hierarchical relationship of countries grouped by continent and subregion. The code uses d3.json to load the data, d3.hierarchy to build the tree structure, and d3.cluster to compute the layout. Panning and zooming interactions are implemented with d3.zoom. SVG paths connect parent nodes to children with curved links, and text labels show country names with font sizes scaled by tree depth.

FFarzand-e-Ali

80% match

Loading thumbnail…

Untitled

This radial tree visualization displays the hierarchical relationships between world regions, subregions, and countries, with text labels sized by depth. The d3.cluster layout positions nodes radially, and d3.svg paths connect parent-child nodes with curved links. Users can pan and zoom the entire visualization using d3.zoom, which applies a transform to a container group. The code reads country data from a JSON file using d3.json, and the font sizes scale with depth via d3.scaleSqrt, creating a clear visual hierarchy.

Hhotdoujiang

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

80% match