idohadoker

@idohadoker·4 public vizzes

Fork of World Countries Tree

This example visualizes a hierarchical tree of function calls from a C codebase, with the root “main” branching into manager functions and their nested subroutines. The data, loaded from a JSON file, is displayed using D3 v5’s `tree` layout and `hierarchy` function, with nodes connected by `linkHorizontal` paths. Panning and zooming are enabled via `d3.zoom`, and the SVG text labels carry file paths and function names. The visual uses a teal stroke and serif typography to present the call graph clearly.

Mar 12, 2023

Loading thumbnail…

Fork of World Countries Tree

This interactive dendrogram visualizes the hierarchical structure of world countries, organized by continent and subregion. The tree layout uses horizontal branching paths to display parent-child relationships, with country names rendered as text labels. Built with React and D3 v5, the visualization employs the `d3.tree` layout algorithm, `d3.linkHorizontal` for path generation, and `d3.zoom` for pan and zoom interactions. Data comes from a JSON file containing the geographic hierarchy, and the SVG output is styled with CSS.

Mar 12, 2023

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, using D3.js version 5. The tree layout (d3.tree) positions nodes horizontally, with links drawn as curved paths via d3.linkHorizontal and SVG rendering. Text labels show country names at varying font sizes based on depth, while zooming is enabled through d3.zoom. Data comes from a local JSON file structured with nested children arrays.

Mar 12, 2023

Loading thumbnail…

Fork of World Countries Tree

This tree diagram shows the hierarchical structure of world countries, organized by continent and subregion. The visualization uses a horizontal icicle layout where the root node "World" branches into continents like Asia, which further divide into regions and individual countries. The hierarchical data is loaded from a JSON file and rendered with D3 v5, using the `tree()` layout function to compute node positions and `linkHorizontal()` to generate the connecting paths. Pan and zoom functionality is enabled through D3's `zoom()` event handler, which transforms the SVG group containing the entire tree.

Mar 12, 2023