shubham gupta

@shubham348·2 public vizzes

World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, using a D3.js layout with nodes representing geographic areas from a JSON data source. The code employs the `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` APIs to compute the tree structure and draw curved links, while `d3.zoom` enables interactive pan and zoom functionality. Text labels are positioned based on node depth, with font sizes scaling inversely to depth. The SVG rendering uses a teal stroke for paths and a serif font (Playfair Display) for country names.

Jan 8, 2020

Loading thumbnail…

World Countries Tree

This example shows a hierarchical tree of world countries organized by continent and region, with nodes connected by curved links. The visualization uses D3 v5’s `tree` layout and `linkHorizontal` path generator to position and draw the hierarchy, rendering the structure as SVG paths. Data comes from a JSON file with nested `children` arrays, and the view supports interactive zooming through D3’s `zoom` behavior. The styling applies a custom Playfair Display font and a teal stroke color to the links.

Jan 8, 2020