KanakDhawan

@KanakDhawan·2 public vizzes

World Countries Tree

This interactive visualization displays the hierarchical structure of world countries, organized by continent and subregion, using a D3.js tree layout. The SVG rendering presents a horizontal dendrogram where country names appear as text nodes, with font size decreasing at deeper levels to indicate hierarchy. The visualization loads hierarchical JSON data and uses D3's `hierarchy` and `tree` layouts to compute positions, while `linkHorizontal` generates the curved connecting paths. Pan and zoom functionality is implemented through D3's `zoom` event handler, and the styling incorporates the Playfair Display font with a green color scheme for the tree links.

Dec 4, 2019

Loading thumbnail…

World Countries Tree

This interactive visualization presents the hierarchical structure of world countries, organized by continent and subregion. Using a tidy tree layout, the SVG renders country names as text nodes connected by green paths, with the root labeled “World.” The visualization employs D3.js v5 with the `tree()`, `hierarchy()`, and `linkHorizontal()` APIs to compute and draw the layout. Users can zoom and pan the entire view via the `zoom()` interaction, while the font size scales with tree depth. The data comes from a structured JSON file representing geographic groupings.

Dec 4, 2019