Fork of World Countries Tree

100%

Fork of World Countries Tree

✓ Published0🌍 Public

Last edited Aug 2, 2022

Created on Aug 2, 2022

This example visualizes a decision tree from JSON data, using a horizontal icicle layout to show the hierarchy of classification rules and their predicted outcomes. The visualization employs D3.js v5 APIs including `tree`, `hierarchy`, and `linkHorizontal` to compute the layout and draw the connecting links as SVG paths. Zooming and panning functionality is implemented through the `zoom` event, which applies an SVG transform to the main group. The tree’s branching nodes display the split conditions, while leaf nodes show numeric prediction values, all rendered with a custom Playfair Display font.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of World Countries Tree

This example displays a hierarchical tree from a JSON dataset, with nodes labeled and connected by curved links whose stroke thickness varies with child data size. It uses D3.js v5, including the `tree` layout, `hierarchy` for data nesting, and `linkVertical` for path generation. The SVG rendering is controlled via `select`, with zoom functionality integrated through the `zoom` and `event` APIs. Text labels use a Playfair Display font, styled with a white shadow effect from CSS.

DDamian Grzanka

88% match

Loading thumbnail…

Fork of World Countries Tree

A fork of the World Countries Tree example displays a hierarchical dataset as a horizontal tree layout, with node labels and curved links rendered as SVG elements. The visualization uses D3 v5’s `tree` layout, `hierarchy`, and `linkHorizontal` path generator to position nodes and draw edges, while the `zoom` behavior enables panning and scaling of the entire graph. Data is loaded from a local `data.json` file, and node labels are styled with a Playfair Display font and white text shadow.

Ssmeiyin

87% match

Loading thumbnail…

Fork of World Countries Tree

This visualization renders the hierarchical structure of world countries as a vertical tree, grouping nations by continent and subregion. It shows the nested relationships between continents, regional divisions, and individual countries. The code uses D3 v5’s `tree` layout and `hierarchy` functions to compute node positions, with `linkVertical` generating curved paths for connections. SVG circles and text labels display each node, while the `zoom` behavior enables panning and scaling. Data is loaded from a JSON file, and styling uses the Playfair Display font with color-coded nodes and links by depth.

HHaili0109

87% match

Loading thumbnail…

Fork of World Countries Tree

This visualization shows a hierarchical tree of world countries, organized from continents down to subregions and individual nations, using a horizontal dendrogram layout. Labels appear at each node, with font size decreasing by depth to emphasize higher-level groupings. The implementation uses D3 v5’s `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` to compute the layout and draw SVG paths, while `d3.zoom` enables panning and zooming. Styling relies on a Playfair Display font and teal connection lines, with data loaded from a local JSON file.

Ffkukcha

87% match

Loading thumbnail…

Fork of World Countries Tree

This D3.js v5 visualization presents a hierarchical tree of world countries, organized by continent and subregion, using a horizontal icicle layout. The chart shows the geographic grouping of nations from a JSON data source, with each node labeled by country name and positioned by depth. The code leverages D3's `tree`, `hierarchy`, and `linkHorizontal` functions to compute the layout and draw connecting paths. Interactive pan and zoom are enabled through D3's `zoom` event, while text styling uses the Playfair Display font.

AAbdouEnsaj

87% match

Loading thumbnail…

Fork of Fork of World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion, using a horizontal dendrogram layout. The code employs `d3.tree()` and `d3.hierarchy()` to compute node positions from a JSON data file, with `d3.linkHorizontal()` generating smooth curved links between parent and child nodes. Interactive zooming is enabled through `d3.zoom()`, allowing users to explore the full dataset. Node labels are rendered as SVG text elements with font sizes that decrease per depth level, while paths are styled with a teal stroke and Playfair Display typography.

YYuji

87% match

Loading thumbnail…

Fork of World Countries Tree

This fork of a world countries tree visualizes the hierarchical relationships between continents, subregions, and countries using an SVG-based tree layout. The d3.hierarchy and d3.tree functions structure the data, while d3.linkHorizontal generates the curved connecting paths. The visualization uses d3.zoom to enable panning and zooming, with text labels sized according to depth level. Data is loaded from a JSON file structured by geographic regions, rendered in the Playfair Display font.

IIlayaraja R

86% match

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries organized by continent and subregion, using a left-to-right dendrogram layout. The D3 v5 code loads hierarchical JSON data and renders it as SVG paths and text labels. It applies a `tree` layout with `linkHorizontal` for curved connections, supports zooming via `d3.zoom`, and uses the Playfair Display font for country names.

YYuji

86% match