Skip to main content
SimilarExport ZIP
100%

Basic Tree Map

✓ Published0🌍 Public
MMounikaBeerelly
Last edited Jun 9, 2020
Created on Jun 9, 2020

This visualization shows a hierarchical tree map of world regions and countries, with the root labeled "World" branching into continents and subregions before reaching individual nations. The layout positions nodes horizontally, with parent-child relationships drawn as curved links using the `linkHorizontal` path generator. The visualization loads data from a local JSON file and uses D3 v5's `tree` and `hierarchy` functions to compute the layout, while SVG elements are selected and managed with `select` and `selectAll`.

AI-generated description
  1. Constructing a node-link tree visualization
  2. adding text labels to the nodes
  3. using the margin convention
  4. tweaking label alignment and size
  5. panning and zooming
  6. using a custom font

// d3-heirarchy package

MIT Licensed

Similar vizzes

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

World Countries Tree

This visualization shows a hierarchical tree of world countries, organized by continent and subregion. It maps the geographic hierarchy of nations into a horizontal icicle-style layout. The D3.js v5 code uses the `tree` layout, `hierarchy`, and `linkHorizontal` functions to position nodes and draw connecting paths. Text labels are rendered with variable font sizes based on depth, and the SVG supports pan and zoom through a `zoom` event. The data is loaded from a local JSON file containing the full country and regional structure.

DDavid Barel
88% match
Loading thumbnail…

World Countries Tree

This example renders a hierarchical tree of world countries organized by continent and subregion. The visualization displays the geographic grouping structure with curved link paths connecting parent nodes to their children, starting from the root "World" node. It uses D3 v5 APIs including `d3.tree()` for layout, `d3.hierarchy()` for data structuring, and `linkHorizontal()` to generate the SVG paths. The data comes from a static JSON file loaded via `d3.json()`, with the SVG canvas sized to fill the viewport.

AArriannePandaraoan
88% match
Loading thumbnail…

Art Tree

This visualization shows a hierarchical tree of world regions and countries, with the global structure flowing from a root "World" node through continents and subregions down to individual nations. The tree layout uses a horizontal orientation, where parent-child connections curve gently between levels, creating a branching structure that resembles an abstract botanical form. The code imports `select`, `json`, `tree`, `hierarchy`, and `linkHorizontal` from D3 v6, then applies the `tree()` layout to position nodes and generates curved link paths using `linkHorizontal()` with swapped x and y coordinates. Data comes from a static JSON file containing the geographic hierarchy, rendered as SVG paths that fill the entire browser viewport.

OOleg
88% match
Loading thumbnail…

world tree

This visualization shows the hierarchical structure of world geography, displaying continents, subregions, and countries as a horizontal tree layout. The data comes from a JSON file with nested parent-child relationships. Using D3 v5, the code applies the d3.tree layout to compute node positions and renders links with d3.linkHorizontal paths in an SVG. The tree spreads from the root node “World” on the left, with branches extending rightward to reveal the full country list.

Vvladvaculin
88% match
Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, as an interactive tree diagram. Using D3 v5’s `tree` layout and `linkHorizontal` path generator, the SVG renders curved links between parent and child nodes, with country names positioned along the hierarchy. The code loads hierarchical JSON data, applies `hierarchy` to structure it, and styles text with serif fonts, varying font size by depth. The visualization relies on D3’s selection, zoom, and JSON loading APIs, with static rendering of all nodes and links.

Fftjyangf
88% match
Loading thumbnail…

World Countries Tree

This hierarchical tree visualization displays the geographic organization of world countries, branching from continents down to sub-regions and individual nations. The data, loaded from a JSON file, is structured in a nested parent-child format. Using D3 v5 APIs, the code applies a `tree` layout and `hierarchy` function to process the data, then connects nodes with horizontal links and displays text labels. The visualization is rendered as an SVG, using the `linkHorizontal` generator to draw the tree paths.

Nnadia-el
88% match
Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion. The tree layout renders countries as leaf nodes beneath their regional groupings, with curved horizontal links connecting parent and child nodes. The visualization uses D3 v5's `tree()` layout and `linkHorizontal()` generator, with text labels sized inversely to node depth. The SVG output is rendered dynamically from a JSON dataset, and users can navigate the hierarchy using D3's `zoom()` behavior for panning and scaling.

Ccpsshan
88% match