Skip to main content
SimilarExport ZIP
100%

Dynamic Width & Height

✓ Published0🌍 Public
Ddaanasma
Last edited May 8, 2020
Created on May 5, 2020

This example shows a hierarchical tree visualization of world regions and countries, with text labels sized inversely to their depth in the hierarchy. The layout uses `d3.tree` and `d3.hierarchy` to position nodes and links, rendered as SVG paths via `d3.linkHorizontal`. Pan and zoom interactions are enabled through `d3.zoom`, applied to a containing group. The data comes from a nested JSON file, and the visualization fills the browser viewport by reading `document.body.clientWidth` and `clientHeight`.

AI-generated description

Mapping

some Mapping interactionz

MIT Licensed

Similar vizzes

Loading thumbnail…

D3TreeTest

This example shows a hierarchical tree visualization of world countries, organized by continent and region, with a zoomable SVG canvas. The code uses D3 v5’s `tree()` layout, `hierarchy()`, and `linkHorizontal()` to position nodes and draw curved links between parent and child elements. It loads the hierarchical structure from `data.json` via `json()`, and renders country names as text with font sizes scaled by node depth. The zoom behavior is enabled through `d3.zoom()`, allowing users to pan and scale the tree.

Vvijendrabiranwar@gmail.com
84% 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…

Let's make a face with D3.js!

This example demonstrates a hierarchical tree visualization of world regions and countries, arranged in a structured layout with labeled nodes. The visualization shows the geographic hierarchy from continents down to individual countries, with each text node sized according to its depth in the tree. The code uses D3.js v5 APIs including `tree()`, `hierarchy()`, `linkHorizontal()`, and `zoom()` to compute the layout, draw the connecting paths, and provide interactive zooming. Data comes from a local `data.json` file with region and country names, rendered as SVG elements with custom text shadow styling.

Ss-janibekova
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 Countries Tree with D3.js!

This example visualizes the hierarchical relationships among world countries and regions as a collapsible-style tree. It displays continents branching into subregions and individual countries, using a horizontal layout with adjustable text size based on depth. The visualization implements pan and zoom functionality through D3’s `zoom` behavior, applying the transform to an SVG group. The tree structure is generated with `d3.hierarchy` and `d3.tree`, while curved links are drawn using `d3.linkHorizontal` from a local `data.json` file.

Fframptonb
83% match
Loading thumbnail…

World Countries Tree

This example visualizes the hierarchical structure of world countries, organized by continent and subregion, as an interactive tree diagram. The D3.js v5 code uses the `tree` layout and `hierarchy` to compute node positions, while `linkHorizontal` renders the connecting paths. Pan and zoom functionality is implemented via the `zoom` behavior, and the data is loaded from a local JSON file. SVG elements are used for rendering, with text labels sized based on their depth in the hierarchy.

Mmrisouza
83% match
Loading thumbnail…

MY TREE

This example presents a hierarchical tree of world regions and countries, using a horizontal dendrogram layout where the root node, “World,” expands through continents like Asia into sub-regions and individual nations. It uses D3 v5’s `tree` and `hierarchy` functions to compute the layout, with links drawn via `linkHorizontal` paths. The visualization supports zooming and panning through the `d3.zoom` API. Node labels are rendered as SVG text elements with font sizes that shrink based on depth, and the data comes from a JSON file loaded via `json`.

Ssrini-rg
83% match
Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of world countries organized by geographic regions, rendered as an SVG using d3.v5. The tree layout employs `d3.tree` and `d3.hierarchy` to structure the data, with `d3.linkHorizontal` drawing curved paths between parent and child nodes. Text labels vary in font size based on depth, and users can pan and zoom the entire view via `d3.zoom`. The example loads data from a JSON file and is presented as a static, interactive diagram.

Hhakhalid
83% match