Skip to main content
SimilarExport ZIP
100%

World countries tree

✓ Published1🌍 Public
MMauradion
Last edited Jul 20, 2021
Created on May 20, 2021

This example visualizes hierarchical survey data as a radial tree, with each leaf node represented by a colored horizontal bar showing a percentage value and its associated words array listed underneath. Built with D3 v5 and SVG, the code uses `d3.hierarchy`, `d3.cluster`, and `d3.scaleLinear` to compute the layout and encode numeric values as bar heights. Labels and bars are positioned along the circular hierarchy, and the visualization loads data from a JSON file containing nested topic clusters with word lists, as well as support for panning and zooming via `d3.zoom`.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of world country data, mapping nested numerical attributes into a branching structure. The SVG rendering uses d3.hierarchy and d3.tree to compute the layout, with links drawn as horizontal curves via d3.linkHorizontal. Each path is colored with a teal stroke, and the view supports interactive pan and zoom through d3.zoom. The data originates from a JSON file containing nested children with named values, while the visual emphasizes structural relationships over leaf labels, as text nodes are not rendered in the code.

BBalakumar
86% match
Loading thumbnail…

World Countries Tree

This visualization presents the hierarchical structure of world countries, organized by continent and subregion, as a radial-style tree diagram. It renders the data as a horizontally oriented tree using SVG paths and text labels, with node positions computed by the `tree()` layout and `hierarchy()` functions from D3 v5. The visualization supports pan and zoom interactions through the `zoom()` behavior. Text labels display country names with font size decreasing by depth, and the data is loaded from a local JSON file.

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

World Countries Tree

This example visualizes the hierarchy of world countries using a tree diagram. The root node represents the World, branching into continents, subregions, and finally individual countries based on the data.json structure. The tree is rendered with D3.js v5, using the `d3.tree` layout, `d3.hierarchy`, and `d3.linkHorizontal` for the edges. The SVG is drawn with text labels and styled paths, and a `d3.zoom` component enables interactive pan and zoom.

Aannadehtiarova
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
Loading thumbnail…

World Countries Tree

This example shows a hierarchical tree of world countries using a horizontal node-link layout. The visualization maps the nested structure of the data to a tree, with text labels sized according to depth level. The code uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` to position nodes and draw curved links, while a zoom behavior lets viewers pan and scale the entire SVG. Data is loaded via `d3.json` from a local `data.json` file, with text styled using the Playfair Display font and paths stroked in green.

Yyeeah
86% match
Loading thumbnail…

Fork of World countries tree

This example presents a hierarchical tree of world countries, with nodes arranged using a cluster layout from D3 v5. The visualization uses data2.json to display branches for continents and regions, with leaf nodes styled as colored rectangles scaled by percentage values. D3's `d3.cluster()` and `d3.hierarchy()` arrange the tree structure, while `d3.scaleLinear()` maps data values to rectangle heights. Text elements list category names, percentages, and associated keywords for each leaf, all rendered as SVG. Zooming and panning are enabled via `d3.zoom()`.

AAlex Velez
85% match
Loading thumbnail…

World Countries Tree

This visualization presents a world countries dataset as an interactive tree diagram, where each node reveals nested categories and numeric labels. The hierarchical layout renders horizontal links with curved paths, while text size scales with depth. Built with D3 v5, it uses `d3.tree`, `hierarchy`, and `linkHorizontal` to generate the SVG path geometry. The entire chart rotates 90 degrees via an SVG transform, and `d3.zoom` enables pan and zoom interactions. Country names are omitted, leaving only coded identifiers and hierarchical structure.

RRostislav Tinchev
85% match