Fork of ice82

100%

✓ Published0🌍 Public

Last edited Apr 9, 2025

Created on Apr 9, 2025

Forked from ice82

This fork of ice82 presents a small hierarchical dataset of world population as a toggleable view. The **Tree View** uses `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` to draw a tidy node-link diagram, with circle size mapping to population values. The **Network View** instead employs `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to create an interactive, draggable graph. Both views render to SVG and encode root, region, and country nodes with distinct colors.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ice82

This example presents hierarchical population data as an interactive tree and network visualization. Buttons toggle between a `d3.tree` layout showing parent-child relationships with node sizes scaled by population, and a `d3.forceSimulation` network view with draggable nodes and link lines. The code uses D3 v7 with SVG rendering, drawing colored circles and labels for world regions and countries from embedded sample data.

Ssdarsi2404@gmail.com

87% match

Loading thumbnail…

Fork of Tree

A fork of a three-layer D3 v7 tree visualization renders a hierarchical dataset of continents, countries, and cities using SVG. The code builds a vertical tree layout with `d3.hierarchy` and `d3.tree()`, then draws curved links with `d3.linkVertical()`. Node shapes encode depth: rounded rectangles for the root and countries, diamonds for continents, and circles for leaf cities, with a legend explaining each.

Mmaddulanagasanjana@gmail.com

80% match

Loading thumbnail…

Fork of ice8

This fork of ice8 displays an interactive family tree from a JSON dataset, rendered as a collapsible hierarchy of circles and labels. Clicking a node toggles its children, animating the layout with smooth transitions. The visualization uses d3.layout.tree and d3.svg.diagonal to position and draw links, with SVG elements styled via CSS. Data loads from an external qn_tree.json file, and node expansion/collapse is handled through custom click events and update functions.

SSaivignesh-9176

80% match

Loading thumbnail…

Fork of World Countries Tree

A fork of the World Countries Tree example displays a hierarchical dataset as a horizontal tree layout, with node labels and curved links rendered as SVG elements. The visualization uses D3 v5’s `tree` layout, `hierarchy`, and `linkHorizontal` path generator to position nodes and draw edges, while the `zoom` behavior enables panning and scaling of the entire graph. Data is loaded from a local `data.json` file, and node labels are styled with a Playfair Display font and white text shadow.

Ssmeiyin

80% match

Loading thumbnail…

Fork of Fork of World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion, using a horizontal dendrogram layout. The code employs `d3.tree()` and `d3.hierarchy()` to compute node positions from a JSON data file, with `d3.linkHorizontal()` generating smooth curved links between parent and child nodes. Interactive zooming is enabled through `d3.zoom()`, allowing users to explore the full dataset. Node labels are rendered as SVG text elements with font sizes that decrease per depth level, while paths are styled with a teal stroke and Playfair Display typography.

YYuji

79% match

Loading thumbnail…

Fork of world countries tree

This visualization displays a hierarchical tree of world countries organized by continent and subregion, with each country positioned as a leaf node. The layout uses a horizontal tree structure rendered as SVG paths with red links connecting parent and child nodes. The implementation loads country population data from a CSV file and hierarchical structure from JSON, then applies `d3.tree()` and `d3.hierarchy()` to compute node positions, while `d3.linkHorizontal()` generates the curved connecting paths.

HHillKinsh

78% match

Loading thumbnail…

Fork of ICE8 - Family Tree

This interactive family tree visualization displays hierarchical relationships using an SVG-based node-link diagram. The tree is rendered with colored, rounded rectangles representing individuals, connected by labeled, arrowed links. Built with D3 v3’s layout and behavior APIs (`d3.layout.tree`, `d3.behavior.zoom`), the visualization supports zooming, panning, and node expansion via click interactions. Data is loaded from a local JSON file (`data.json`), and custom CSS controls node colors and tooltip styling.

Bbhargavarathod

78% match

Loading thumbnail…

Fork of ICE - 8: Visualizing Tree

This visualization displays a hierarchical tree structure, showing nodes and their relationships as branching links. The data originates from a CSV file, which is processed using `d3.stratify` and `d3.hierarchy`. The tree layout is computed with `d3.tree`, positioning nodes horizontally. Links are drawn as curved paths via `d3.linkHorizontal`, while node labels are rendered as text elements with font sizes scaling by depth. Pan and zoom interactions are enabled through D3's `zoom` behavior, applied to the SVG container.

78% match