Earth Tree

100%

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 11, 2023

This example renders a hierarchical tree visualization of Earth and its continents, with countries as leaf nodes, using an SVG-based layout. The tree is generated with `d3.hierarchy` and `d3.tree`, and links are drawn as horizontal paths via `d3.linkHorizontal`. Each node is a circle with a text label, styled through CSS classes. The data is hardcoded in the script, and the visualization uses D3 v7 within a plain HTML page.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Earth Tree

This example displays a hierarchical tree of Earth's continents and countries, with each node represented by a circle and label. The tree layout is computed using `d3.tree()` and `d3.hierarchy()`, which assign parent-child relationships and spatial coordinates. Nodes and links are rendered as SVG elements: circles for nodes and horizontal curved paths for links, styled via CSS classes. The data is a static JavaScript object listing continents and selected countries, and the visualization uses D3 v6 within an HTML page.

Aachyutanandmishra17@gmail.com

95% match

Loading thumbnail…

Tree with D3.js

This visualization displays a hierarchical tree structure of world regions and countries, with the data nested from continents down to individual nations. The layout uses D3’s `tree` and `hierarchy` functions to compute node positions, while horizontal link paths are generated with `linkHorizontal`. The SVG is dynamically sized to the browser viewport, and the tree is rendered entirely as path elements connecting parent and child nodes, with country names shown as labels within the structure.

Ssiddharth171

85% match

Loading thumbnail…

Countries Tree

This visualization displays a hierarchical tree of countries organized by continent and subregion, rendered as an SVG with horizontal links and text labels. The example uses D3 v5’s `tree` layout, `hierarchy`, `linkHorizontal`, and `zoom` APIs to generate and interactively pan and scale the structure. Data from `data.json` feeds the hierarchy, with font size varying by depth and leaf nodes left-aligned while parent nodes are centered.

Jjeelong

84% match

Loading thumbnail…

Tree

This visualization shows a hierarchical tree of world regions and countries, with the root labeled "World" branching into continents like Asia and sub-regions such as Southern Asia, and further into individual nation names. It uses D3 v5’s `tree` layout to compute node positions and `linkHorizontal` to generate curved SVG paths for the connections. The code loads hierarchical data from a `data.json` file and renders links in an SVG element sized to the browser viewport, without displaying node labels.

Kkaviya-ds

83% match

Loading thumbnail…

Fork of tree visualization of countries

This example displays a hierarchical tree visualization of countries organized by continent and subregion, with the root node labeled “World” and leaves representing individual nations. The data is loaded from a JSON file and rendered as an SVG using D3 v7’s `tree` layout, `hierarchy`, and `linkHorizontal` generators. Nodes are labeled with text whose font size decreases with depth, while curved links are styled with a teal stroke. Pan and zoom interactions are enabled via `d3.zoom`, and the layout adapts to the browser window dimensions.

Aakshayms0

83% match

Loading thumbnail…

World Countries Tree with D3.js

This example shows a hierarchical tree of world countries, organized by continent and subregion, with each country as a leaf node. The tree is rendered as an SVG using D3.js v5, with horizontal links connecting parent nodes to their children, and text labels sized according to depth. The visualization supports pan and zoom interactions via D3's `zoom` behavior. Data is loaded from a JSON file using `d3.json` and processed with `d3.hierarchy` and `d3.tree` for layout.

Ssiddharth171

83% match

Loading thumbnail…

Data Tree

This visualization shows a hierarchical tree of world regions and countries, with countries nested under their respective continents and subregions. The tree is rendered with SVG paths connecting parent and child nodes, using a horizontal layout where text labels display country names at sizes that decrease with depth. The code uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` APIs to compute the layout, and includes zoom functionality via `d3.zoom`. Data comes from a static JSON file containing the geographic hierarchy.

MMichael Milano

82% match

Loading thumbnail…

Art Tree

This visualization shows a tree layout of world geography, branching from continents down through regions and into individual countries. The hierarchy is rendered as an SVG path diagram using d3.hierarchy and d3.tree, with linkHorizontal generating the curved connections between nodes. The data is loaded from a JSON file with d3.json, and the layout is sized to fill the browser window using the viewport dimensions. The visualization uses a React framework and d3.v6 to display the complete geographic hierarchy without labels or interactivity.

DDannie2020

82% match