Skip to main content
SimilarExport ZIP
100%

Earth Tree

✓ Published0🌍 Public
Aachyutanandmishra17@gmail.com
Last edited Apr 12, 2023
Created on Apr 12, 2023
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Earth Tree

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.

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…

Country Tree

This visualization displays the hierarchical structure of world countries organized by continent and subregion, rendered as a horizontal tree layout using D3.js. The tree branches show the geographic grouping from World through Asia down to individual nations. The visualization uses D3's `tree`, `hierarchy`, and `linkHorizontal` functions to compute and draw the layout with SVG paths and text elements. Interactive zooming is enabled via D3's `zoom` event, and node labels are sized proportionally to their depth in the hierarchy.

EEmma
84% 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
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…

Countries Tree

This example visualizes a hierarchical dataset of countries organized by continent and subregion as a dendrogram. The tree layout positions all nodes in a horizontal cluster, with country names displayed at varying font sizes based on depth using the d3.cluster and d3.hierarchy APIs. Curved link paths are generated with d3.linkHorizontal, while d3.zoom enables panning and scaling of the SVG canvas. The data is loaded from a JSON file and rendered entirely in SVG with custom styling.

MMatthiasVanCampen
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
83% match