YolanCristoria

@YolanCristoria·3 public vizzes

World Countries Tree

This interactive visualization presents a hierarchical tree of world countries, organized by continent and subregion, with the country names displayed as text at varying font sizes based on their depth. The D3 v5 code uses `d3.tree()` and `d3.hierarchy()` to compute the layout, while `d3.linkHorizontal()` generates curved connecting paths between parent and child nodes. Pan and zoom functionality is implemented through `d3.zoom()`, allowing users to explore the data loaded from a JSON file. The SVG rendering uses a green stroke for the links and a serif font for the labels.

Aug 16, 2019

Loading thumbnail…

World Countries Tree

This visualization shows the hierarchical organization of world countries grouped by continent and subregion, with a radial tree layout that spaces nodes by depth. It uses a D3 v5 tree layout with horizontal links rendered as SVG paths and Playfair Display font labels. The text size decreases with each depth level, and a zoom behavior allows panning and scaling of the entire diagram. Data comes from a static JSON file containing nested country and region names.

Aug 16, 2019

Loading thumbnail…

World Countries Tree

This hierarchical tree visualization displays the world’s countries grouped by continent and subregion, using D3’s `d3.tree` layout and `d3.hierarchy` to structure the data. Each node label is rendered as SVG text with font size decreasing by depth, while curved links are drawn using `d3.linkHorizontal`. The chart supports pan and zoom through D3’s `zoom` behavior. Data is loaded from a JSON file, and styling relies on the Playfair Display font.

Aug 16, 2019