Skip to main content
SimilarExport ZIP
100%

Count-Tree

✓ Published1🌍 Public
AAndrew Fletcher
Last edited Jan 24, 2020
Created on Jan 18, 2020
Forked from Blank Canvas

This visualization shows the hierarchical structure of countries organized by continent and subregion, displayed as a horizontal tree layout. Each node is labeled with its geographic region or country name, with font size decreasing at deeper levels. The SVG render is built with d3.v5, using `tree`, `hierarchy`, `linkHorizontal`, and `zoom` APIs to position nodes and links. The data comes from a JSON file containing the UN geographic classification.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Tree with Countries

This visualization shows the hierarchical structure of countries organized by continent and subregion, with each country’s name displayed as a leaf node. The tree layout, generated using `d3.tree` and `d3.hierarchy`, positions nodes horizontally, and links are drawn with `d3.linkHorizontal` as SVG paths. Labels scale in font size based on tree depth, from large continent names to smaller country names, while the entire diagram supports pan and zoom via `d3.zoom`. Data is loaded from a JSON file using `d3.json`, and the SVG output is styled with a tan path color and a custom font.

LLeora Wenger
88% match
Loading thumbnail…

World Countrees

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, using a horizontal tree layout. The D3.js code constructs the tree from a JSON data file, positioning nodes and connecting them with paths. Text labels for each region and country are rendered with font sizes that decrease with depth, and the entire visualization is drawn as an SVG within a zoomable group, allowing users to explore the geography.

FFernando Gonzalez - Valadez
87% match
Loading thumbnail…

Countries Tree

This visualization displays a hierarchical tree of countries organized by continent and subregion, rendered as an SVG with horizontal links and text labels. The example uses D3 v5’s `tree` layout, `hierarchy`, `linkHorizontal`, and `zoom` APIs to generate and interactively pan and scale the structure. Data from `data.json` feeds the hierarchy, with font size varying by depth and leaf nodes left-aligned while parent nodes are centered.

Jjeelong
87% match
Loading thumbnail…

World Countries Tree

This visualization shows the hierarchical structure of world countries organized by continent and subregion, displayed as a horizontal tree diagram. The layout derives from a JSON dataset containing the United Nations’ geographical groupings, with text labels at each hierarchy level sized by depth. The implementation uses D3 v5’s `tree` and `hierarchy` layouts to compute positions, `linkHorizontal` for the connecting paths, and `zoom` to enable panning and scaling. All rendering is done as SVG elements within a `g` container, styled with Playfair Display fonts and teal-colored links.

Ppaularl
86% match
Loading thumbnail…

Tree visualization of countries

This visualization uses a hierarchical tree layout to display the geographic organization of countries, grouping them by region and subregion under a top-level “World” node. The data is rendered as an interactive SVG graphic, with curved horizontal links connecting parent and child nodes, and text labels displayed at varying font sizes based on depth. Built with D3.js v5, it uses `d3.tree`, `d3.hierarchy`, `linkHorizontal`, and `d3.zoom` to support panning and zooming. Node labels are positioned according to the tree layout’s computed x and y coordinates, with leaf nodes oriented to the right.

CCalvin Gomez
86% match
Loading thumbnail…

World Countries Tree

This visualization presents the hierarchical structure of world countries organized by continent and subregion, displayed as a horizontal tree layout. The hierarchical data is loaded from a JSON file and rendered as an SVG using D3 v5’s `tree` layout, `hierarchy`, and `linkHorizontal` path generator. Node labels are positioned according to their depth, with font size decreasing at deeper levels, and the entire graphic supports pan and zoom via D3’s `zoom` behavior.

VVito
86% match
Loading thumbnail…

Countries Tree

This example visualizes a hierarchical dataset of countries organized by continent and subregion as a dendrogram. The tree layout positions all nodes in a horizontal cluster, with country names displayed at varying font sizes based on depth using the d3.cluster and d3.hierarchy APIs. Curved link paths are generated with d3.linkHorizontal, while d3.zoom enables panning and scaling of the SVG canvas. The data is loaded from a JSON file and rendered entirely in SVG with custom styling.

MMatthiasVanCampen
86% match
Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and then by subregion. The tree layout uses a horizontal orientation, with country names rendered as text nodes that decrease in font size with increasing depth. The code employs D3 v5 APIs including `tree`, `hierarchy`, `linkHorizontal`, and `zoom` to construct the SVG visualization, with data loaded from a JSON file containing the regional groupings.

Jjlspangl
85% match