ICE 8 - 2Q Sadvik

100%

ICE 8 - 2Q Sadvik

✓ Published0🌍 Public

Last edited Apr 9, 2026

Created on Apr 9, 2026

This interactive D3.js example combines a family tree and a social network side-by-side in a single HTML page. The family tree uses a hierarchical layout with `d3.tree()` and `d3.linkVertical()` to visualize parent-child relationships, with nodes colored by generation. The social network employs `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to create a physics-based layout of connected individuals, rendered as draggable circles via the `d3.drag()` API.

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

89% 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

88% 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

84% 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

83% match

Loading thumbnail…

ICE8 - Social Network

This example visualizes a social network as an interactive node-link diagram, showing friendships between ten people with each person represented as a labeled circle. The layout is computed using d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter, rendering as SVG. Data comes from a local JSON file. Links are drawn as blue lines with arrowheads, nodes are draggable via d3.drag, and hovering highlights nodes with a thicker stroke.

SSatyaVineeth

83% match

Loading thumbnail…

ICE-8

This interactive family tree visualizes three generations of a family, with names displayed in a hierarchical layout branching from a single root ancestor. The SVG rendering uses D3.js v3’s `d3.layout.tree` to position nodes and `d3.svg.diagonal` for curved links. Users can click any node to collapse or expand its children, with smooth `transition` animations adjusting node positions and link paths. The data is hardcoded as a JSON array in the script, and styling includes violet backgrounds, cyan circles, and green strokes.

DDineshK2602

83% match

Loading thumbnail…

ICE8 - Family Tree

This example displays a family tree as an interactive hierarchical diagram using D3.js v3. The tree layout organizes nodes by generation, with each family member represented as a colored rectangle and labeled with their name. SVG elements render the nodes and links, while the data comes from a JSON file containing nested parent-child relationships. Clicking on nodes triggers zooming and dragging behavior via d3.behavior.zoom, and hovering reveals tooltips. The code employs d3.layout.tree for positioning and applies custom collision detection to prevent overlapping nodes.

LLakshmiVandanaNunna

83% 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

83% match