Skip to main content
SimilarExport ZIP
100%

Q2_ice8

✓ Published0🌍 Public
SSaiSriSuryaBandaru@my.unt.edu
Last edited Nov 9, 2025
Created on Nov 9, 2025
Forked from D3 Starter

This visualization presents vehicle hierarchies and relationships using two side-by-side D3.js v7 SVG views. The left panel displays a tree layout constructed with `d3.hierarchy` and `d3.tree`, grouping vehicles into Land, Air, and Water categories with colored links and node depths. The right panel shows a force-directed network built with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`, connecting vehicle companies like Tesla, Toyota, and SpaceX. Draggable nodes and labeled edges illustrate collaborations, with all styling handled through inline SVG attributes and CSS classes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 Tree Diagram.

This visualization shows a hierarchical tree of vehicle categories, breaking down the root “Vehicles” node into Land, Air, and Water subgroups, each with its own leaf nodes like Car, Plane, and Boat. Using D3.js v7 and an SVG rendering, the code implements a tree layout via `d3.hierarchy` and `d3.tree`, drawing curved links with `d3.linkHorizontal` and positioning nodes as circles. Node colors distinguish depth levels, and text labels identify each category. The static dataset is hardcoded in the script, with the layout size explicitly set on the SVG canvas.

Bbadrinath888@gmail.com
82% match
Loading thumbnail…

Tree Graph ICE 8

This tree visualization displays the hierarchical structure of vehicle data, progressing from vehicle make down through model, fuel type, and transmission. The D3.js (v7) chart uses a tidy tree layout, with nodes colored according to their depth level—root in gray, makes in red, models in teal, fuel types in light green, and transmissions in yellow. The code builds the hierarchy from a CSV file using `d3.group`, constructs a tree structure, and renders it with `d3.hierarchy` and `d3.tree`, including the `d3.linkVertical` edge path generator.

Ssaisathwikaguntupalli@gmail.com
81% match
Loading thumbnail…

Tree Graph ICE 8

This tree visualization displays the hierarchical structure of vehicle data, progressing from vehicle make down through model, fuel type, and transmission. The D3.js (v7) chart uses a tidy tree layout, with nodes colored according to their depth level—root in gray, makes in red, models in teal, fuel types in light green, and transmissions in yellow. The code builds the hierarchy from a CSV file using `d3.group`, constructs a tree structure, and renders it with `d3.hierarchy` and `d3.tree`, including the `d3.linkVertical` edge path generator.

Ssaisathwikaguntupalli@gmail.com
81% match
Loading thumbnail…

Network Graph ICE 8

This network graph visualizes vehicle data from a CSV file, organizing vehicles into a hierarchical structure by Make, Model, Fuel Type, and Transmission. It uses d3.forceSimulation to position nodes in a dynamic layout, with circles colored by depth level and labeled accordingly. The graph is rendered as SVG using d3.v7, with links connecting parent and child nodes to show the relationships between vehicle attributes.

Ssaisathwikaguntupalli@gmail.com
80% match
Loading thumbnail…

Network Graph ICE 8

This network graph visualizes vehicle data from a CSV file, organizing vehicles into a hierarchical structure by Make, Model, Fuel Type, and Transmission. It uses d3.forceSimulation to position nodes in a dynamic layout, with circles colored by depth level and labeled accordingly. The graph is rendered as SVG using d3.v7, with links connecting parent and child nodes to show the relationships between vehicle attributes.

Ssaisathwikaguntupalli@gmail.com
80% match
Loading thumbnail…

Ice8_Question2

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.

Ssrujana reddy
78% match
Loading thumbnail…

Vehicles Tree

This visualization shows a hierarchical tree of vehicle types, from the root "Car" node down to three subcategories—Sedan, SUV, and Coupe—each branching to specific car models like Toyota and Honda. The tree is rendered using the D3.js v3 layout API with collapsible nodes that animate when clicked. Node rectangles are color-coded by type and connected by directional links with arrows, while tooltips provide additional label details. The layout accounts for collisions between nodes and supports zoom and drag panning through `d3.behavior.zoom`.

HHemanthh81
78% 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
77% match