ICE_8_Yaswanth_duddu

100%

ICE_8_Yaswanth_duddu

✓ Published0🌍 Public

Last edited Nov 9, 2025

Created on Nov 9, 2025

This network diagram visualizes the tripartite relationships between cuisines, ingredients, and dishes using a force-directed layout. Node shapes encode the three categories—triangles for cuisines, circles for ingredients, and squares for dishes—while link width indicates the strength of association between connected entities. The visualization uses D3.js v7, specifically the d3.forceSimulation API for physical layout, with interactivity allowing users to drag nodes and zoom via mouse wheel. The data consists of 15 nodes and six links drawn as SVG paths, with a tooltip displaying node details on hover.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

NETWORK GRAPH ( ICE 8)

This interactive network graph visualizes the relationship between five Indian sweets and their ingredients. Orange nodes represent dishes while light blue nodes show components such as flour, sugar, and ghee, with gray links connecting each recipe to its required items. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while SVG circles and text labels render the data. Users can drag nodes to rearrange the layout, which was built with D3 v7.

Bbhargavinalamothu@gmail.com

81% match

Loading thumbnail…

ICE_8

This is a force-directed network graph built with D3.js that visualizes connections between seven people across four groups. Nodes are rendered as white circles with thick red borders and blue labels, while links appear as orange lines weighted by an optional numerical value. The graph reads from a JSON file containing node and link definitions, and uses the d3.layout.force API to simulate physical forces, allowing users to click and drag nodes. The SVG canvas is styled with a green background, and the implementation relies on D3 v4 and v2 libraries.

MMounishSeeni

78% match

Loading thumbnail…

ICE8 network graph

This network graph visualizes the relationships between seven named nodes (A through G) grouped into four categories, with links weighted by values like 2 and 3. The graph is rendered as an SVG using D3.js v4, where each node is a draggable orange circle with a text label. The force-directed layout is driven by D3’s `d3.layout.force` API, which applies gravity, charge, and distance parameters to position nodes. Link thickness is derived from the square root of each link’s weight, and the graph data is loaded from a local JSON file.

Ggayathri

78% match

Loading thumbnail…

ICE-8 Social Network Graph (Dhanusree Kodali)

This interactive network graph visualizes a social network of nine individuals and their connections, using node-link diagrams to represent people and their relationships. The visualization is built with D3.js v4 and React, rendering SVG elements with animation. The force-directed layout is powered by `d3.layout.force()` with custom gravity, distance, and charge parameters, while nodes are draggable and display tooltips on hover. Data is loaded from an external JSON file containing node groups and weighted links, with link thickness proportional to connection weight.

DDhanusree Kodali

78% match

Loading thumbnail…

ICE8_Network

This example visualizes a small social network of six people grouped into three clusters, with links weighted by connection strength. A force-directed layout positions the nodes, and users can drag them to rearrange the structure. The visualization is built with D3 v4, using `d3.layout.force` for simulation, SVG circles for nodes, and lines for links whose stroke width scales with the square root of each edge weight. Node labels appear beside each circle, and the layout updates continuously during the simulation.

SSai Bhavana Akkineni

77% match

Loading thumbnail…

Network_graph1_ICE_8

A hierarchical restaurant menu dataset is visualized as a force-directed network graph, distinguishing restaurant, cuisine, and dish nodes by color. The code uses D3.js v7 with `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` to position nodes and draw SVG links with arrow markers, while node attributes are defined in static JavaScript data containing ratings, costs, and sales figures.

RRohithNaiduDevareddy@my.unt.edu

77% match

Loading thumbnail…

ICE-8(Network Chart)

This network chart visualizes a small graph of seven people (e.g., Uday, Jayanth, Vishwa) and their weighted connections, rendered as red circular nodes and black links. Built with D3.js v4, it uses `d3.layout.force()` to apply a force-directed layout (with gravity, distance, and charge parameters) and enables node dragging via `force.drag`. Node labels display names, and link thickness reflects each edge’s weight from `graphFile.json`. The SVG canvas is 900×670, with styles defined in CSS.

Jjayanthamol99

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

77% match