Skip to main content
Log in
M

maralamir

@maralamir·3 public vizzes

Loading thumbnail…

World Countries Tree

The World Countries Tree shows a hierarchical organization of words extracted from a dataset of text entries. Each node is labeled with a short list of keywords, and parent-child relationships create a branching tree structure. The visualization uses D3.js v5 with an SVG rendering and a horizontal link diagram. It employs the `d3.tree` layout and `d3.linkHorizontal` generator to draw the paths, while `d3.zoom` enables interactive pan and zoom on the canvas. Node text size scales with depth, and all labels are styled with the Playfair Display font.

Mar 31, 2020
Loading thumbnail…

World Countries Tree

The World Countries Tree shows a hierarchical organization of words extracted from a dataset of text entries. Each node is labeled with a short list of keywords, and parent-child relationships create a branching tree structure. The visualization uses D3.js v5 with an SVG rendering and a horizontal link diagram. It employs the `d3.tree` layout and `d3.linkHorizontal` generator to draw the paths, while `d3.zoom` enables interactive pan and zoom on the canvas. Node text size scales with depth, and all labels are styled with the Playfair Display font.

Mar 31, 2020
Loading thumbnail…

World Countries Tree

This visualization presents a hierarchical tree of text labels, rendering world countries and related terms as interconnected nodes. Users can pan and zoom the SVG canvas via mouse events. The code loads hierarchical data from a JSON file, applies D3's `tree` layout and `hierarchy` function, and draws curved links with `linkHorizontal`. Node labels display their `id` values with font sizes that shrink with depth, styled using the Playfair Display font. The visualization omits visual node markers, showing only connecting paths and text labels.

Mar 31, 2020