Skip to main content
SimilarExport ZIP
100%

Art Tree

✓ Published3🌍 Public
CCurran Kelleher
Last edited Oct 5, 2018
Created on Sep 20, 2018

The Art Tree example displays a hierarchical tree layout of world geographical regions and countries, with data derived from a nested JSON structure. The visualization uses D3 v5's `tree` and `hierarchy` functions to compute node positions, and renders horizontal curved links between parent and child nodes via `linkHorizontal` paths in SVG. The tree spans the full browser viewport, with its dimensions set from `document.body.clientWidth` and `clientHeight`. Data loading is handled through the `json` method, with the resulting hierarchy laid out using `treeLayout` before drawing.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Art Tree

A hierarchical tree layout of world regions and countries, arranged as a horizontal dendrogram with brown links branching from a root node labeled "World." The visualization uses D3 v5's `tree` and `hierarchy` functions to compute node positions, and a `linkHorizontal` path generator to draw the connecting curved edges. Data comes from a local `data.json` file containing nested geographic groupings, rendered as SVG paths that span the full browser viewport.

MMichał Szumnarski
94% match
Loading thumbnail…

Art Tree

This visualization renders a hierarchical dataset of world regions and countries as a horizontal tree diagram, showing the geographic structure from the root node "World" down through continents and subregions to individual nations. Using D3 v5, the code applies the `tree` layout and `hierarchy` functions to position nodes, while `linkHorizontal` generates curved SVG paths that connect parent and child entries based on the data from data.json. The tree fills the entire browser viewport, with node labels omitted, emphasizing the branching relationships across the geographic taxonomy.

DDaniel García
93% match
Loading thumbnail…

Art tree

A hierarchical tree visualization renders the structure of world regions and countries, with the root labeled "World" branching into continents, subregions, and individual nations. The layout uses d3.tree and d3.hierarchy to compute node positions, while d3.linkHorizontal generates curved path links between parent and child nodes. The SVG canvas fills the entire viewport, displaying the data as an artful, horizontal branching diagram without labels, emphasizing the organic, tree-like distribution of geographic relationships from the JSON dataset.

CCarloWK1202
93% match
Loading thumbnail…

Art Tree.js

Art Tree.js renders a hierarchical dataset of world geography as a horizontal tree diagram, with nodes representing continents, regions, and countries connected by curved links. The visualization uses D3 v5’s `tree` layout and `linkHorizontal` path generator to position nodes and draw edges within an SVG canvas. Data is loaded asynchronously from a JSON file via `d3.json` and processed through `d3.hierarchy`. The layout adapts to the full browser viewport by setting the SVG dimensions to the document’s client width and height.

NNeepaB
93% match
Loading thumbnail…

Art Tree

This visualization displays a hierarchical tree of world regions and countries from a JSON dataset, with each node labeled by its geographic name. The tree layout uses D3 v5’s `tree()` and `hierarchy()` functions, while horizontal curved links are generated with `linkHorizontal()`. Text size decreases with node depth, and the SVG rendering supports pan and zoom via D3’s `zoom()` behavior. Labels include white text shadows for readability, and the layout fills the full browser viewport.

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

Art Tree

A horizontal dendrogram displays hierarchical world geography, starting with continents and branching into subregions and individual countries. The visualization uses a D3 tree layout with `d3.hierarchy` and `d3.tree` to compute node positions, and `d3.linkHorizontal` to draw the curved connecting paths. Data is loaded from a local JSON file, and the SVG canvas is sized to the full browser viewport.

Iianleekq
92% match
Loading thumbnail…

Art Tree

This tree visualization displays the hierarchical structure of world regions and countries, using a horizontal layout that expands from left to right. Each node represents a geographic classification, from continents down to individual nations. The visualization uses D3 v5’s `tree` layout to compute node positions, `hierarchy` to structure the JSON data, and `linkHorizontal` to draw the connecting paths as SVG elements. The data is loaded from an external `data.json` file, and the rendered paths are appended to an SVG canvas sized to the full browser window.

RRubens
92% match