Skip to main content
SimilarExport ZIP
100%

Data Tree

✓ Published2🌍 Public
MMichael Milano
Last edited Jan 9, 2020
Created on Jan 9, 2020
Forked from smiley face

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Tree

This data visualization shows a hierarchical tree of world regions and countries, with text labels sized according to depth in the hierarchy. The visualization uses D3 v5’s `tree` layout and `linkHorizontal` generator to render the branching structure as SVG paths, while `zoom` enables panning and scaling. Data comes from a static JSON file, and the graph is built within a React framework.

JJoe M
95% match
Loading thumbnail…

World Countries Tree

This visualization shows the hierarchical structure of world countries organized by continent and subregion. It uses a horizontal tree layout with D3.js v5, rendering SVG elements for both links and text labels. The code applies D3's `tree()`, `hierarchy()`, `linkHorizontal()`, and `zoom()` APIs to construct the layout and enable interactive panning and zooming. The underlying data comes from a JSON file containing nested country and region names.

Pprincit
92% match
Loading thumbnail…

World Countries Tree with D3.js!

This visualization presents a hierarchical tree of world countries, organized by continent and sub-region based on a nested JSON data structure. The tree renders as an indented horizontal layout using SVG paths and text elements, with the D3.js library managing the layout calculations. The code leverages D3's `tree`, `hierarchy`, and `linkHorizontal` APIs to position nodes and draw connecting lines, while a zoom interaction via `d3.zoom` allows panning and scaling. The styling uses a custom serif font and white text shadows for readability.

Fforcox43
92% 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
92% match
Loading thumbnail…

World Tree

This visualization shows the hierarchical structure of world regions and countries as an interactive tree. The root node “World” branches into continents, subregions, and individual nations, with text labels sized by depth. Built with D3 v5 in React, it uses `d3.tree` and `d3.hierarchy` with `d3.linkHorizontal` for curved links, while `d3.zoom` enables panning and scaling. Country data comes from `data.json`, rendered as an SVG with Playfair Display typography.

JJake
91% match
Loading thumbnail…

World Tree

This visualization shows the hierarchical structure of world regions and countries as an interactive tree. The root node “World” branches into continents, subregions, and individual nations, with text labels sized by depth. Built with D3 v5 in React, it uses `d3.tree` and `d3.hierarchy` with `d3.linkHorizontal` for curved links, while `d3.zoom` enables panning and scaling. Country data comes from `data.json`, rendered as an SVG with Playfair Display typography.

JJake
91% match
Loading thumbnail…

World countries tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, as an interactive tree diagram. Using D3.js v5 with a React framework, it renders SVG elements with the `tree` layout and `linkHorizontal` generator to create branching paths. The code loads hierarchical JSON data and supports pan-and-zoom interactions via `d3.zoom`, with text labels sized proportionally to depth within the hierarchy.

Eevapavlinek
91% match
Loading thumbnail…

Tree Visualization of World Countries

This visualization displays the hierarchical relationship between world countries, continents, and subregions as a horizontal tree diagram. The code uses D3 v5’s `tree` and `hierarchy` layouts to compute node positions, with `linkHorizontal` generating curved connecting paths. Text labels show country names at varying font sizes based on tree depth. The SVG rendering supports zooming and panning through D3’s `zoom` behavior, and the data comes from a nested JSON file. The styling uses the IM Fell English SC font.

CCassie
91% match