Tree

100%

✓ Published0🌍 Public

Last edited Nov 13, 2023

Created on Nov 13, 2023

This example visualizes the hierarchical structure of Xinjiang’s administrative divisions and their populations using a vertical tree layout. Each node is a circle colored by its top-level prefecture, with links drawn via `d3.linkVertical` and text labels rotated vertically. The code uses `d3.hierarchy` and `d3.tree` to compute positions, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and renders output as SVG. Population data comes from the embedded `xinjiang.json` file.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Icicle

This icicle chart visualizes the population hierarchy of Xinjiang, China, using a d3.partition layout. The data is loaded from a JSON file and structured with d3.hierarchy, with node sizes proportional to population values. Each rectangle is colored by its top-level region using a d3.scaleOrdinal with the schemeCategory10 palette, while text labels appear on larger nodes. The visualization renders in SVG, with both rectangles and labels positioned according to the partition’s computed coordinates.

Vvivianaaai@qq.com

82% match

Loading thumbnail…

SunBurst

This sunburst chart visualizes the population distribution of Xinjiang’s administrative regions, using nested arcs to show hierarchy from the province level down to districts and counties. The code relies on d3.arc for the ring segments, d3.partition with a size of [2*Math.PI, 500] to compute the layout, and d3.hierarchy to structure the JSON data. Each segment’s fill color is derived from the top-level region via a scaleOrdinal palette, and text labels are rotated and positioned to fit within the arcs.

Vvivianaaai@qq.com

77% match

Loading thumbnail…

TREE

This tree visualization displays a hierarchical dataset of world countries organized by continent and subregion, using a horizontal icicle-style layout. The D3 v5 code builds the structure with `tree()` and `hierarchy()`, renders edges as SVG paths via `linkHorizontal()`, and labels nodes with scaled text. Users can zoom and pan through the SVG canvas using the `zoom()` interaction API, with the viewport transform applied to a group element. Data comes from a JSON file, and styling uses the Maven Pro font with cyan edges.

Ccocktaildata

75% match

Loading thumbnail…

Tree Chart Template

This tree chart template visualizes hierarchical data about individuals linked to regions, using orange circular nodes connected by grey horizontal links. The layout applies the `d3.tree()` and `d3.hierarchy()` APIs to structure the JSON data, while `d3.linkHorizontal()` generates the curved paths. Text labels with font sizes decreasing by depth accompany each node, and circles shrink with tree level. The SVG rendering fills the viewport, with styling applied via CSS classes for strokes and fills.

LLex

74% match

Loading thumbnail…

World Countries Tree

This example visualizes the hierarchical structure of world countries, grouped by continent and region, as a horizontal tree diagram. It uses a D3 tree layout with `d3.hierarchy` and `d3.linkHorizontal` to draw curved links, while node labels are rendered as SVG text elements with font sizes scaled by depth. The visualization supports pan and zoom interaction through `d3.zoom`, and data is loaded from a JSON file. Styling is applied via CSS, with teal link strokes and white text shadows for readability.

XXin Li

74% 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

74% match

Loading thumbnail…

Country Tree

This visualization displays the hierarchical structure of world countries organized by continent and subregion, rendered as a horizontal tree layout using D3.js. The tree branches show the geographic grouping from World through Asia down to individual nations. The visualization uses D3's `tree`, `hierarchy`, and `linkHorizontal` functions to compute and draw the layout with SVG paths and text elements. Interactive zooming is enabled via D3's `zoom` event, and node labels are sized proportionally to their depth in the hierarchy.

EEmma

74% 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

73% match