Rostislav Tinchev

@frostyhue·3 public vizzes

World Countries Tree

This visualization shows the hierarchical structure of world countries as a horizontal tree, with each node labeled by its numeric code and organized by geographic groupings. The tree is rendered using SVG paths generated by d3.tree and d3.linkHorizontal, with text labels sized inversely to their depth. The viewport supports pan and zoom via d3.zoom, and the entire layout is rotated 90 degrees to display the hierarchy vertically. Data is loaded from a JSON file and styled with CSS.

Jul 1, 2020

Loading thumbnail…

World Countries Tree

This visualization presents a world countries dataset as an interactive tree diagram, where each node reveals nested categories and numeric labels. The hierarchical layout renders horizontal links with curved paths, while text size scales with depth. Built with D3 v5, it uses `d3.tree`, `hierarchy`, and `linkHorizontal` to generate the SVG path geometry. The entire chart rotates 90 degrees via an SVG transform, and `d3.zoom` enables pan and zoom interactions. Country names are omitted, leaving only coded identifiers and hierarchical structure.

Jul 1, 2020

Loading thumbnail…

World Countries Tree

This visualization shows the hierarchical relationship between the world’s continents, subregions, and countries as an interactive collapsible tree. A horizontal dendrogram layout renders SVG paths for links and text labels for each node, with font size decreasing by depth. The view supports pan and zoom via d3.zoom, while d3.tree computes the layout and d3.linkHorizontal generates curved paths. Data is loaded from a local JSON file, and the visualization uses the Playfair Display font for all labels.

Jul 1, 2020