Skip to main content
SimilarExport ZIP
100%

ICE-8 assignment

✓ Published0🌍 Public
BBHUMIKA CHUNDU
Last edited Nov 3, 2025
Created on Nov 3, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 2Q Sharanya

This example presents two linked D3.js visualizations side by side. The first, a family tree, displays three generations of a family using a hierarchical layout. The second, a social network diagram, shows relationships between seven individuals arranged through a force-directed simulation, where nodes can be repositioned via an interactive drag. Both visualizations use SVG canvases for rendering, with the family tree employing `d3.hierarchy` and `d3.tree` for layout, and the network using `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` for physics-based positioning and interaction.

Cchengalvasharanya@gmail.com
90% 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
87% match
Loading thumbnail…

(d3.js)Network Graph and Family Tree

This example displays two distinct visualizations: a network graph and a family tree. The network graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes based on attractive and repulsive forces, rendering connections as lines. The family tree uses `d3.tree` and `d3.stratify` to convert parent-child relationships into a hierarchical layout. Both visualizations render as SVG elements with nodes as styled circles and labels, with data hardcoded in JavaScript arrays.

Mmogantirudhrani@gmail.com
87% match
Loading thumbnail…

Fork of ICE-8 NETWORK

This example presents a family relationships network as an interactive force-directed graph. It shows individuals as draggable nodes and parent–child connections as links, with node color indicating generation depth. The visualization uses D3 v7’s `d3.forceSimulation` with link, charge, center, and collide forces, and loads CSV data from a GitHub Gist to build the hierarchy via `d3.stratify`. SVG rendering displays nodes, links, and labels, with a hover tooltip for additional information.

Sskmriyaz0786@gmail.com
86% match
Loading thumbnail…

d3.js Customized Network Graph and Family Tree

This example presents two side-by-side D3.js visualizations: a force-directed network graph and a hierarchical family tree, both built from the same underlying dataset of names and relationships. The network graph uses d3.forceSimulation with link, charge, and center forces to position nodes, which are drawn as colored circles with labels. The family tree employs a d3.tree layout to arrange parent-child connections as a structured hierarchy. Both visualizations render to SVG, with the network graph using red lines for links and the tree layout displaying its own distinct styling and coloring.

Ppeddubalaji@gmail.com
85% match
Loading thumbnail…

Family Tree and Network Graph with help of D3.js

This example presents two interactive visualizations side-by-side: a network graph and a hierarchical family tree, both built with D3.js. The network graph uses a force-directed layout via `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` to arrange nodes and links, while node labels are positioned by the simulation tick. The family tree is constructed from the same underlying data using `d3.stratify` and `d3.tree`, creating a tidy hierarchy. Both visualizations render as SVG elements with custom styling for nodes, links, and labels.

Ddmouli369@gmail.com
85% match
Loading thumbnail…

ICE-8 (Family Tree)

This example shows an interactive family tree visualization built with D3.js (v3) and SVG. It renders hierarchical data from a JSON file as colored, rounded rectangles connected by links, with each node color-coded by generation type. The tree layout uses d3.layout.tree, and users can click nodes to expand or collapse branches. The visualization includes zoom and drag behavior via d3.behavior.zoom, along with tooltips and drop-shadow filters for visual polish.

AAnjan Shrestha
85% match
Loading thumbnail…

ICE-8: Visualizing Tree with D3.js

This example shows a family tree as a hierarchical node-link diagram, where each person appears as a circular node and relationships are drawn as straight black links. The tree layout is computed with `d3.stratify` and `d3.tree`, positioning generations vertically with distinct fill colors. Nodes and links are rendered as SVG circles and paths, with transitions animating link drawing from the parent outward and text labels fading in per depth. The code uses `transition().duration()` to stagger animations and defines custom colors per generation depth.

Mmanasanimmagadda13
85% match