ICE 8 2Q Sharanya

100%

ICE 8 2Q Sharanya

✓ Published0🌍 Public

Last edited Nov 1, 2025

Created on Nov 1, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

ICE 8 - 2Q Sadvik

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.

SSadvik

89% match

Loading thumbnail…

ice 8 - q2

This example presents two side-by-side visualizations: a hierarchical tree of programming languages and a force-directed network of student collaborations. The tree uses colored nodes and labels to show the structure from root to leaves. The network maps six students and their connections using a force simulation, with draggable nodes and dynamic positioning. Built with d3.v7, the tree leverages `d3.tree()` and `d3.hierarchy()`, while the network uses `d3.forceSimulation()`, `d3.forceLink()`, `d3.forceManyBody()`, and `d3.forceCenter()`, all rendered as SVG.

Hh.harrycoding@gmail.com

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

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

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

84% match

Loading thumbnail…

ICE-8 SOCIAL NETWORK CHART

This example shows a hierarchical social network chart based on family tree data, with nodes and links rendered in SVG. The visualization uses d3.stratify() and d3.tree() to compute node positions from parent-child relationships, then draws animated paths between connected nodes. Each node appears as a light green circle with a dark green border, labeled with a child name, while the blue background contrasts the lime-colored connecting lines. The animation uses D3 transitions to grow the circles and draw the links over time.

Mmadanvemulapally

84% match

Loading thumbnail…

ICE-8

This example visualizes the multi-generational Smith family tree, showing 47 members across 4 generations as an interactive network. It uses D3.js v7 with a force-directed layout via `d3.forceSimulation`, rendering nodes and links as SVG elements. The data is embedded directly in the page as a flat array of parent-child relationships. Hovering over a node triggers a tooltip that displays member details, with `d3.mouse` positioning and CSS transitions controlling the tooltip’s appearance.

HHarshithaAru06

83% match