mrisouza

@mrisouza·2 public vizzes

Hello!

This example uses a D3.js tree layout with horizontal links to display a hierarchical dataset of countries organized by continent and subregion. The visualization renders an indented tree where each node’s label is sized relative to its depth, with larger text for higher-level regions. The code employs `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` to compute positions and draw the connecting paths, while the `zoom` API enables pan and zoom interactions on the SVG canvas. Styling includes a serif font and green strokes for the link paths.

Apr 11, 2019

Loading thumbnail…

World Countries Tree

This example visualizes the hierarchical structure of world countries, organized by continent and subregion, as an interactive tree diagram. The D3.js v5 code uses the `tree` layout and `hierarchy` to compute node positions, while `linkHorizontal` renders the connecting paths. Pan and zoom functionality is implemented via the `zoom` behavior, and the data is loaded from a local JSON file. SVG elements are used for rendering, with text labels sized based on their depth in the hierarchy.

Apr 11, 2019