Joaquin Castañon

@jcastanonv·3 public vizzes

Fork of Fork of Radial Tree of Countries Hierarchy

This radial tree visualizes the hierarchical relationship of world countries, organized by continent and subregion, with country names displayed at varying font sizes based on depth. The visualization, built with D3 v4, uses `d3.cluster` and `d3.hierarchy` to compute the radial layout, while a custom `project` function converts polar coordinates to Cartesian positions for SVG rendering. Panning and zooming are enabled via `d3.zoom`, and node labels are rotated or aligned dynamically based on their angular position. The data comes from a local `data.json` file containing the country hierarchy.

Mar 28, 2021

Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

This radial tree visualization displays a hierarchical structure of world countries, categorized by continent and subregion, with the depth of each node conveyed through font size. The tree is rendered as an SVG using d3.cluster, with curved links connecting parent and child nodes and text labels positioned radially around the center. The visualization supports panning and zooming via d3.zoom, which applies a transform to the entire tree group. Data comes from a local JSON file, and the text often includes a white glow effect for readability against the background.

Mar 28, 2021

Loading thumbnail…

Fork of World Countries Tree

A static vertical tree chart displays the hierarchical structure of world countries, grouped by continent and subregion. The root node, "World," branches into continents like Asia, then into subregions such as Southern Asia, and finally into individual country names, with each level indented horizontally. The visualization uses the D3.js library, employing `tree`, `hierarchy`, and `linkHorizontal` layouts to position nodes and draw connecting paths. Text labels are rendered with a font size that decreases with tree depth, and a zoom interaction is enabled via `d3.zoom`. The data is loaded from a JSON file.

Mar 25, 2021