ice82

100%

✓ Published1🌍 Public

Last edited Apr 9, 2025

Created on Apr 9, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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.

Ssdarsi2404@gmail.com

87% match

Loading thumbnail…

ICE-8 assignment

This example presents two complementary D3.js visualizations: a hierarchical family tree and a force-directed social network. The family tree uses a `d3.tree` layout with `d3.linkHorizontal` curves to connect nodes representing three generations. The social network applies `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position seven interconnected individuals, with draggable nodes. Both visualizations render as SVG elements, and the force graph includes labels beside each node, allowing users to explore relationships through interactive dragging.

BBHUMIKA CHUNDU

83% match

Loading thumbnail…

ice8

The ICE-8 Tree & Network visualization presents two distinct views of relational data, toggled via buttons. The Tree View displays a hierarchical structure, while the Network View maps interconnected nodes, both rendered as scalable vector graphics. The example uses D3.js version 7, leveraging its core selection and layout APIs, with the force-directed simulation handling node positioning in the network mode. The SVG canvas is dynamically redrawn based on the selected view.

Ssdarsi2404@gmail.com

81% match

Loading thumbnail…

Network Visualization (ICE-8)

This example visualizes a family tree as an interactive network graph in SVG, using colored nodes to distinguish grandparents, parents, and children. Force-directed layout via `d3.forceSimulation` with link, charge, and center forces positions the nodes, while links represent familial relationships. Nodes are draggable, and a legend maps roles to colors. The code uses D3 v7, applies drag behavior, and renders labels directly on each node.

Ssowjanya

81% match

Loading thumbnail…

ice8_task2

A dark-themed visualization gallery presents two interactive D3 v7 diagrams: a hierarchical tree of programming languages and a force-directed network of authors and papers. The tree uses `d3.hierarchy` and `d3.tree` to arrange nodes by depth, with shapes varying by level and colors by layer, while hover highlights links. The network uses `d3.forceSimulation` with link, charge, and center forces, representing authors as circles and papers as squares, with drag repositioning and tooltips. Both render as SVG with original data.

Kkmohithkumar7@gmail.com

80% match

Loading thumbnail…

Tree Example

This interactive tree diagram displays the hierarchical structure of a dataset, with nodes and links rendered using SVG and animated transitions. The visualization uses D3.js version 3, with the `d3.layout.tree` for layout and `d3.svg.diagonal` for curved links. Clicking nodes expands or collapses their children, with smooth transitions achieved through `transition.attr`. The static data is embedded in the code, and the example also includes a separate CSV file for population data, though it is not referenced in the visualization.

1123ATFake

80% match

Loading thumbnail…

ice8

A collapsible tree diagram visualizes hierarchical family relationships, rendering nodes and links as an animated SVG. The example uses D3.js version 3.5 with the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute the layout and draw curved paths. Circles and text labels represent individuals, and clicking a node toggles its children’s visibility with smooth transitions. Styling is applied via external CSS, and the input data comes from a local `qn_tree.json` file.

SSaivignesh-9176

79% match

Loading thumbnail…

ICE8 - Interactive Tree Graph

This example presents an interactive family tree visualization using D3.js version 3.5.17. The tree layout (`d3.layout.tree`) arranges hierarchical data with named family members, while SVG circles and text labels render each node and curved diagonal paths (`d3.svg.diagonal`) connect parent-child relationships. Clicking any node toggles its children, triggering smooth 750ms transitions that animate nodes and links to new positions. The code uses fixed-depth spacing (180 pixels per level) and custom styling with teal nodes and thick teal links against a white background.

Kkirangithub23

79% match