Skip to main content
SimilarExport ZIP
100%

Ice8_Question2

✓ Published0🌍 Public
Ssrujana reddy
Last edited Nov 8, 2025
Created on Nov 8, 2025
Forked from D3 Starter

This example presents two side-by-side visualizations: a hierarchical tree of food categories and a force-directed network of named individuals. The tree displays Food, Fruits, Vegetables, and Grains as colored nodes connected by vertical links, with each layer assigned a distinct fill color. The network employs d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position six people nodes and their relational links. Both SVG outputs are built using D3 v7, with the tree using d3.tree and d3.linkVertical for layout.

AI-generated description
MIT Licensed

Similar vizzes

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
85% 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 - Task 2A

This visualization shows a three-level hierarchical tree of food categories, displaying a root node ("Food"), three category nodes (Fruits, Vegetables, Grains), and nine leaf items. The SVG rendering uses d3.hierarchy and d3.tree() to compute the layout, with d3.linkVertical() drawing the curved connections. Nodes are distinguished by shape and color: a yellow circle for the root, light-blue rounded rectangles for categories, and green diamonds for leaf items, each accompanied by text labels. The page includes a static, inline JavaScript dataset with no external data source.

Kkmuktha09@gmail.com
83% match
Loading thumbnail…

ICE-8 : Network Tree

This example shows a small network of named people connected by curved links, where node size and color reflect the number of connections each person has, and links are styled with different thicknesses and red or black colors based on edge values. The visualization uses d3 v5 with a force-directed layout powered by d3.forceSimulation, d3.forceLink, and d3.forceManyBody, rendering nodes as SVG circles with labels and curved paths for links, all draggable via d3.drag. Data is embedded directly in the code as an array of link objects.

NNITIN0601
82% match
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
82% match
Loading thumbnail…

Assignment 8 Force-Directed Node-Link Diagram

This force-directed node-link diagram visualizes a food network, with nodes representing individual food items and links showing relationships between them. The graph uses a physical simulation to position nodes, which are drawn as small green circles connected by black lines, and includes tooltips for interaction. The visualization is rendered with D3 v6, using `d3.forceSimulation` with `d3.forceCenter`, `d3.forceManyBody`, and `d3.forceLink` to drive the layout. Data is loaded from two external CSV files containing node and edge definitions, with the SVG output sized at 2500 by 2000 pixels.

Aahuynh8@dons.usfca.edu
81% match
Loading thumbnail…

Ice 8 network

This example shows an interactive organizational hierarchy as a force-directed network. A CSV file supplies the parent-child relationships, which d3.csv loads and converts into nodes and links. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position the nodes, which are rendered as colored SVG circles based on role (CEO, Manager, or other). Labels accompany each node, and a drag behavior lets users reposition elements, with the simulation updating positions on each tick.

UUday Kiran
81% match
Loading thumbnail…

ICE 8 Task 2B Kumar Danam

This example visualizes a hierarchical dataset of food categories—Food, Fruits, Vegetables, and Grains—as a vertical tree. It shows the nested structure with color-coded nodes by depth: blue for the root, orange for first-level children, and green for leaves, with links as curved paths. Built with D3.js v7, it uses `d3.hierarchy` and `d3.tree` to compute the layout, `d3.linkVertical` for the connecting paths, and SVG circles and text for node rendering. The hardcoded data is displayed in a 600×400 SVG.

KKumar Danam
81% match