Skip to main content
Log in
M

Morgan Mueller

@morganbm123·6 public vizzes

Loading thumbnail…

World Countries Tree

This interactive visualization displays the hierarchical structure of world countries, organized by continent and subregion using a horizontal tree layout. Users can pan and zoom through the SVG-based diagram, which renders country names as text nodes connected by white paths. Built with D3 v5, the example uses the `tree`, `hierarchy`, `linkHorizontal`, and `zoom` APIs to compute the layout and handle navigation. Data is loaded from a JSON file containing a nested structure of geographic regions and countries, with styling applied via custom CSS.

Mar 2, 2020
Loading thumbnail…

World Countries Tree

This example presents a hierarchical tree visualization of uranium operations data, displayed as an interactive SVG diagram. The tree layout, generated with `d3.tree` and `d3.hierarchy`, organizes parent and child nodes across the screen. Users can pan and zoom the entire view using the `d3.zoom` event, which applies a transform to the root grouping. Nodes are represented as text labels with font sizes that scale inversely with depth, while horizontal link paths connect parent to child nodes. The data originates from a JSON file containing nested objects.

Mar 2, 2020
Loading thumbnail…

World Countries Tree

This interactive tree diagram visualizes a company’s operational structure, from corporate headquarters down to individual mines, refineries, and conversion facilities. It shows the hierarchical relationships between parent entities and their subsidiaries across various locations. The visualization uses D3.js v5 APIs, including `d3.hierarchy` and `d3.tree` to layout the pedigree, and `d3.linkHorizontal` to draw the connecting edges. The SVG is rendered with zoom functionality enabled. Text nodes are styled with the Playfair Display font.

Mar 2, 2020
Loading thumbnail…

World Countries Tree

This visualization shows a hierarchical tree of uranium mining operations, arranged by corporation, operation type, and specific mine or project. It uses D3 v5's `tree` layout and `hierarchy` to structure the data, with `linkHorizontal` generating the curved paths between nodes. The interactive zoom feature is implemented via `d3.zoom`, allowing users to pan and scale the SVG. Text labels display each node, with font size varying by depth, while the data is loaded from a JSON file.

Mar 2, 2020
Loading thumbnail…

World Countries Tree

This visualization shows a hierarchical tree of uranium mining operations, arranged by corporation, operation type, and specific mine or project. It uses D3 v5's `tree` layout and `hierarchy` to structure the data, with `linkHorizontal` generating the curved paths between nodes. The interactive zoom feature is implemented via `d3.zoom`, allowing users to pan and scale the SVG. Text labels display each node, with font size varying by depth, while the data is loaded from a JSON file.

Mar 2, 2020
Loading thumbnail…

Cameco Tree

This visualization presents a hierarchical tree of Cameco Corporation's uranium operations, organized by operation type such as open pit, underground, and in situ leaching, with nodes labeled by mine names and facilities. The data from a JSON file is laid out using the d3.tree and d3.hierarchy functions, with links drawn as horizontal paths via d3.linkHorizontal. Pan and zoom functionality is enabled through d3.zoom, and text labels are styled with the Playfair Display font, rendered on an SVG canvas.

Mar 2, 2020