Skip to main content
SimilarExport ZIP
100%

VIS

✓ Published0🌍 Public
DDaniel
Last edited Apr 19, 2021
Created on Apr 19, 2021
Forked from Blank Canvas

This visualization displays a hierarchical tree of global data center locations, organized by geographic region and country. Users can collapse and expand branches by clicking on nodes, with animated transitions that smoothly reposition elements. The visualization uses D3's tree layout and hierarchy functions to compute node positions, while SVG paths render the connecting links. Built with d3-collection for data manipulation, the code implements zoom and pan controls through d3.zoom, and animations utilize transition methods with customizable duration based on Alt key input.

AI-generated description
MIT Licensed

Similar vizzes

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

Tree Visualization

This tree visualization displays hierarchical data as a node-link diagram with circular nodes and connecting links, rendered as an SVG on a 600x600 canvas. The code uses D3 v5, loaded via UNPKG, to select the SVG container and draw the structure, while CSS styles the node circles with a steelblue stroke and the links in light gray. The visualization demonstrates importing D3 functions and local ES6 modules through VizHub, though the specific dataset is not visible in the provided files.

VVenkat-Sumith-Thota
76% match
Loading thumbnail…

Hello VizHub

This example demonstrates a hierarchical tree visualization of world geography, showing countries organized by continent and subregion. The SVG rendering uses d3.hierarchy and d3.tree to compute node positions, with d3.linkHorizontal generating curved paths between parent and child nodes. Country and region names are displayed as text labels positioned according to the tree layout coordinates. The visualization loads its nested JSON data via d3.json and renders entirely through SVG elements, with CSS styling for the connecting paths.

TTran Ly Tan
76% 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
75% match
Loading thumbnail…

D3 viz of world countries

This radial tree displays the hierarchical structure of world countries using data.json, organized by regions and sub-regions. The visualization uses D3 v5’s `tree()` layout to position nodes, with `linkHorizontal()` drawing curved connection paths. Text labels show each country or region name, with font size decreasing based on depth. The SVG canvas supports zooming through D3’s `zoom()` event handler.

Ddhruvs47
75% match
Loading thumbnail…

TREE

This tree visualization displays a hierarchical dataset of world countries organized by continent and subregion, using a horizontal icicle-style layout. The D3 v5 code builds the structure with `tree()` and `hierarchy()`, renders edges as SVG paths via `linkHorizontal()`, and labels nodes with scaled text. Users can zoom and pan through the SVG canvas using the `zoom()` interaction API, with the viewport transform applied to a group element. Data comes from a JSON file, and styling uses the Maven Pro font with cyan edges.

Ccocktaildata
75% 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
75% match
Loading thumbnail…

Art tree

This visualization is an artful "tree" diagram that displays the hierarchical structure of world geography, from continents down to individual countries. The tree layout is rendered as an SVG with paths and text labels, using a custom font and text-shadow effects to create a visually rich presentation. The code leverages D3 v5 functions including `tree`, `hierarchy`, `linkHorizontal`, and `zoom` to compute positions and enable interactive pan and zoom. The data, sourced from a JSON file, contains nested geographic regions and nation names, which are displayed as text at varying font sizes based on depth.

Fforeverworld1879
75% match