Skip to main content
SimilarExport ZIP
100%

xmas 'tree'

✓ Published0🌍 Public
JJake
Last edited Jul 20, 2020
Created on Jul 20, 2020
Forked from Blank Canvas Cross

This visualization renders the hierarchical structure of world regions and countries as a branching tree that resembles a Christmas tree. The data, organized as a nested JSON hierarchy, is laid out using d3.tree and d3.hierarchy, with d3.linkHorizontal generating curved paths for the connections. The SVG rendering uses red-filled paths with green strokes to create the festive appearance, while circle nodes remain white with black outlines. The layout size is dynamically set to the browser window dimensions.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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

Art Tree

This visualization displays a hierarchical tree of world regions and countries, rendered as an SVG with branching paths and size-scaled labels that shrink with depth. Built with D3 v6 in React, it loads hierarchical JSON data and uses `d3.tree()` with `d3.hierarchy()` to compute the layout, while `d3.linkHorizontal()` generates curved edges. Pan and zoom interactions are enabled via `d3.zoom()`, and text elements are positioned along the tree with depth-based font sizing.

Nnsadath
83% match
Loading thumbnail…

Art Tree

This visualization displays a hierarchical tree of world regions and countries, rendered as an SVG with branching paths and size-scaled labels that shrink with depth. Built with D3 v6 in React, it loads hierarchical JSON data and uses `d3.tree()` with `d3.hierarchy()` to compute the layout, while `d3.linkHorizontal()` generates curved edges. Pan and zoom interactions are enabled via `d3.zoom()`, and text elements are positioned along the tree with depth-based font sizing.

Nnsadath
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
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
83% 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
83% 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
83% 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