Hayday Tree

100%

✓ Published0🌍 Public

Last edited Jan 16, 2020

Created on Jan 15, 2020

This visualization presents a hierarchical tree of global regions and countries arranged in a tidy radial layout, with the World as the root and continents branching into subregions and nations. Interactivity comes from a zoom behavior that allows users to pan and scale the entire tree. The code uses D3 v5’s `tree` layout and `zoom` API, though the main data-loading and link-drawing logic is commented out, leaving a static gold circle as the only currently rendered visual element. The page loads `data.json` and applies Playfair Display typography.

AI-generated description

MIT Licensed

Similar vizzes

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

83% match

Loading thumbnail…

World Tree

JJake

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…

Tree Visualization

This interactive tree visualization displays the hierarchical structure of world regions and countries, using a horizontal dendrogram layout. The visualization reads from a JSON data file and renders an SVG using D3 v5, with nodes labeled as text and links drawn as paths. It includes zoom and pan functionality through D3’s `zoom` event, while the layout is computed with the `hierarchy` and `tree` APIs. Text elements are styled with a serif font and white text-shadow for readability.

Ssploitfun

82% match

Loading thumbnail…

World Countries Tree

A hierarchical tree visualizes the geographic structure of world countries, branching from continents into subregions and individual nations. The layout renders as a tidy tree using `d3.tree` and `hierarchy`, with horizontal links generated by `linkHorizontal` and SVG paths. Text labels appear at each node, with font size scaling by depth. The visualization supports pan and zoom interactions via `d3.zoom`, applied to a grouped SVG element. Data comes from a local `data.json` file, and the styling uses the Playfair Display font with text shadows for readability.

MMunTatt Yap

82% match

Loading thumbnail…

World Countries Tree

This visualization shows a hierarchical tree of world countries, organized by continent and sub-region. The tree layout displays each country as a text label, with branching paths connecting nations to their regional groupings, using a zoomable interface for navigation. The code uses d3.hierarchy and d3.tree to compute the layout, d3.linkHorizontal for the connecting paths, and d3.zoom for panning and scaling. Data comes from a nested JSON file, and the SVG rendering highlights the structure with teal links and Playfair Display typography.

Jjessand4

82% match

Loading thumbnail…

Art Tree

This visualization renders a hierarchical dataset of world regions and countries as a horizontal tree diagram, showing the geographic structure from the root node "World" down through continents and subregions to individual nations. Using D3 v5, the code applies the `tree` layout and `hierarchy` functions to position nodes, while `linkHorizontal` generates curved SVG paths that connect parent and child entries based on the data from data.json. The tree fills the entire browser viewport, with node labels omitted, emphasizing the branching relationships across the geographic taxonomy.

DDaniel García

82% match

Loading thumbnail…

Tree Visualization of World Countries.js

A hierarchical tree visualization displays countries grouped by continent and subregion, with the world as the root and individual nations as leaf nodes. The layout uses D3's `tree` and `hierarchy` functions to position nodes, while `linkHorizontal` generates curved paths connecting them. The SVG rendering applies zoom functionality from D3's `zoom` event, and text labels scale in font size based on node depth. Styled with a Playfair Display font and text shadows, the visualization reads hierarchical country data from a local JSON file.

Xxsg13

81% match