Skip to main content
SimilarExport ZIP
100%

Hello VizHub

✓ Published0🌍 Public
TTran Ly Tan
Last edited Oct 13, 2019
Created on Oct 13, 2019
Forked from 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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

A hierarchical tree visualization displays the geographic structure of the World, Asia, and its subregions down to individual countries. The example renders a horizontal dendrogram using D3 v5, with the `d3.hierarchy` and `d3.tree` layouts computing node positions, while `d3.linkHorizontal` generates curved SVG paths for the links. Data is loaded from a local `data.json` file, and the SVG canvas is sized to the full viewport dimensions.

TTran Ly Tan
92% match
Loading thumbnail…

Hello VizHub

A hierarchical tree visualization displays the geographic structure of the World, Asia, and its subregions down to individual countries. The example renders a horizontal dendrogram using D3 v5, with the `d3.hierarchy` and `d3.tree` layouts computing node positions, while `d3.linkHorizontal` generates curved SVG paths for the links. Data is loaded from a local `data.json` file, and the SVG canvas is sized to the full viewport dimensions.

TTran Ly Tan
92% match
Loading thumbnail…

Hello VizHub

A hierarchical tree visualization displays the geographic structure of the World, Asia, and its subregions down to individual countries. The example renders a horizontal dendrogram using D3 v5, with the `d3.hierarchy` and `d3.tree` layouts computing node positions, while `d3.linkHorizontal` generates curved SVG paths for the links. Data is loaded from a local `data.json` file, and the SVG canvas is sized to the full viewport dimensions.

TTran Ly Tan
92% match
Loading thumbnail…

World Countries Tree

This example displays a hierarchical tree of world countries organized by continent and subregion, rendered as an SVG visualization. The data is loaded from a JSON file using `d3.json()`, then processed through `d3.hierarchy()` and `d3.tree()` to compute the layout. Nodes are labeled with country names, with font size scaling by depth, and links are drawn using `d3.linkHorizontal()`. Pan and zoom interactions are implemented with `d3.zoom()`, while hover effects are omitted.

KKlabbaparn
87% match
Loading thumbnail…

World Countries Tree

This example shows a hierarchical tree of world countries organized by continent and subregion. The layout uses D3’s `tree()` and `hierarchy()` functions to compute node positions, with curved `linkHorizontal()` paths connecting parent and child nodes. Labels display each country’s full name, with font size decreasing by tree depth. The visualization supports pan and zoom through D3’s `zoom()` behavior, applied to a group element. Data comes from a static `data.json` file, and all rendering is done with SVG elements styled via external CSS.

Bbakstorage00001
86% match
Loading thumbnail…

world countries tree

This example shows a hierarchical tree of world countries, organized by continent and subregion, with each country name displayed as a text label. The visualization renders an SVG using D3.js v5, leveraging the `tree` and `hierarchy` layouts to compute node positions and `linkHorizontal` to draw curved paths between parent and child nodes. Data is loaded from a local JSON file, and text labels are offset with a dy attribute for readability.

JJason-Manbodh
86% match
Loading thumbnail…

World Countries Tree

This example presents the hierarchical structure of world countries organized by continent and subregion as a tree diagram. The visualization uses a horizontal tree layout from D3 v5, with nodes representing geographic regions and countries, connected by curved links. Users can pan and zoom the entire structure through D3’s zoom behavior. The code builds the layout with `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal`, rendering text labels with font sizes that decrease with depth. Data is loaded from a local JSON file, and the SVG output features a custom serif font and distinct stroke color.

Llapeno20
86% match
Loading thumbnail…

World Countries Tree

This example shows the hierarchical structure of world countries, grouped by continent and subregion, as an indented tree of text labels. The visualization uses a D3.js tree layout with hierarchical data, rendered as SVG. It employs `d3.hierarchy` to process the JSON data, `d3.tree` for layout, and `d3.linkHorizontal` to draw the connecting paths. Text labels display country and region names, with font size decreasing by depth, and the view is interactive via `d3.zoom` for panning and scaling.

AAnnie Liao
86% match