Fork of World Countries Tree

100%

Fork of World Countries Tree

✓ Published0🌍 Public

Last edited Apr 26, 2021

Created on Apr 26, 2021

This example displays a family tree of the Noble House of Sirius, rendered as hierarchical radial layout using D3’s `tree` and `hierarchy` functions. The code loads hierarchical data from a local JSON file and draws horizontal links with `linkHorizontal`, while text labels show each family member’s name. The visualization supports interactive pan and zoom through D3’s `zoom` behavior, and all elements are rendered as SVG. The styling uses a custom font and white text shadows for readability.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of World Countries Tree

A fork of the World Countries Tree example displays a hierarchical dataset as a horizontal tree layout, with node labels and curved links rendered as SVG elements. The visualization uses D3 v5’s `tree` layout, `hierarchy`, and `linkHorizontal` path generator to position nodes and draw edges, while the `zoom` behavior enables panning and scaling of the entire graph. Data is loaded from a local `data.json` file, and node labels are styled with a Playfair Display font and white text shadow.

Ssmeiyin

86% match

Loading thumbnail…

Fork of World Countries Tree

This example displays a hierarchical tree from a JSON dataset, with nodes labeled and connected by curved links whose stroke thickness varies with child data size. It uses D3.js v5, including the `tree` layout, `hierarchy` for data nesting, and `linkVertical` for path generation. The SVG rendering is controlled via `select`, with zoom functionality integrated through the `zoom` and `event` APIs. Text labels use a Playfair Display font, styled with a white shadow effect from CSS.

DDamian Grzanka

86% match

Loading thumbnail…

Fork of World Countries Tree

This example shows a static tree visualization of world countries, organized hierarchically by continent and subregion. The tree displays country names as text labels, with link paths connecting parent nodes to their children. The code constructs the tree layout using D3's `tree` and `hierarchy` functions, then renders horizontal links with `linkHorizontal` and text elements in SVG. Pan and zoom interactions are enabled through D3's `zoom` event handler, while the data is loaded from a local `data.json` file.

Hharitha13.yln1@gmail.com

85% match

Loading thumbnail…

Fork of World Countries Tree

This example displays a horizontal tree diagram mapping a small dataset of names from a root node (“Alice”) through branching children. The visualization uses d3.hierarchy and d3.tree to compute node positions, with d3.linkHorizontal generating smooth bezier curves for the connecting paths. Users can pan and zoom the entire SVG canvas via d3.zoom and a transform event. Node labels are rendered as text elements with a decorative serif font and white text shadow, while the shallow hierarchy is static with no animations.

Ggeofree101@gmail.com

84% match

Loading thumbnail…

Fork of World Countries Tree

This tree visualization displays the hierarchical structure of world countries, with nodes labeled by country identifiers and connected by curved paths. The layout uses `d3.tree` and `d3.hierarchy` to compute positions, while `d3.linkHorizontal` generates the links. The SVG renders with a green stroke for paths and serif text, with font size decreasing by node depth. The visualization supports pan and zoom through `d3.zoom`, applied to a background rectangle. Data is loaded from a local `data.json` file, and the code uses D3 v5 via ES modules.

AAnki1997chavan

84% match

Loading thumbnail…

Fork of World Countries Tree

This fork of the D3.js world countries tree displays a hierarchical dataset of countries organized by continent and subregion. The visualization uses a horizontal tree layout with branching links, and text labels whose font size decreases with depth to show the classification from "World" down to individual countries. The code builds the layout with `d3.tree()` and `d3.hierarchy()`, renders the links with `d3.linkHorizontal()`, and enables pan and zoom through a custom `zoom()` extension that applies transformations to a group element. Data is loaded from `data.json`, and the SVG output is styled with custom CSS.

Aartijain688

84% match

Loading thumbnail…

Fork of World Countries Tree

This visualization renders the hierarchical structure of world countries as a vertical tree, grouping nations by continent and subregion. It shows the nested relationships between continents, regional divisions, and individual countries. The code uses D3 v5’s `tree` layout and `hierarchy` functions to compute node positions, with `linkVertical` generating curved paths for connections. SVG circles and text labels display each node, while the `zoom` behavior enables panning and scaling. Data is loaded from a JSON file, and styling uses the Playfair Display font with color-coded nodes and links by depth.

HHaili0109

84% match

Loading thumbnail…

Fork of World Countries Tree

This fork of the World Countries Tree generates a horizontal dendrogram from hierarchical JSON data, displaying nodes as text labels connected by curved links. The example uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` to compute the layout, while a d3 `zoom` behavior enables panning and scaling of the SVG canvas. Node text size scales inversely with depth, and the Playfair Display font stylizes labels.

AAbdul Majeed

84% match