lapeno20

@lapeno20·3 public vizzes

Lars Test Graylog

This interactive tree visualization maps a hierarchical structure of world regions and countries, rendered as an SVG with D3 v5. The layout uses `d3.tree` and `d3.hierarchy` to position nodes, with `d3.linkHorizontal` drawing curved connections. Users can pan and zoom through the diagram via `d3.zoom`, applied to a group element. Node labels display region and country names with font sizes decreasing by depth, sourced from a local JSON file. The visualization is styled with Roboto font and semi-transparent text shadows for readability.

Jul 1, 2020

Loading thumbnail…

Lars Test World Countries Tree

This tree visualization shows the hierarchical structure of world countries, organized by continent and subregion, with each country name displayed as a leaf node. The D3.js v5 code uses `d3.tree` and `d3.hierarchy` to compute the layout, while `linkHorizontal` generates curved paths between parent and child nodes. SVG text elements are positioned according to the tree coordinates, with font sizes decreasing by depth. The visualization supports zooming and panning through D3’s `zoom` behavior, and it reads its hierarchical data from a local JSON file containing the country groupings.

Jul 1, 2020

Loading thumbnail…

World Countries Tree

This example presents the hierarchical structure of world countries organized by continent and subregion as a tree diagram. The visualization uses a horizontal tree layout from D3 v5, with nodes representing geographic regions and countries, connected by curved links. Users can pan and zoom the entire structure through D3’s zoom behavior. The code builds the layout with `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal`, rendering text labels with font sizes that decrease with depth. Data is loaded from a local JSON file, and the SVG output features a custom serif font and distinct stroke color.

Jul 1, 2020