NETWORK GRAPH ( ICE 8)

100%

NETWORK GRAPH ( ICE 8)

✓ Published0🌍 Public

Last edited Apr 8, 2025

Created on Apr 8, 2025

Forked from Fork of 11702358-ice 8 -Network

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE_8_Yaswanth_duddu

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.

YYaswanth

81% 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…

ICE8: Network Graph

A network graph maps personal and professional connections radiating from a central node, with labeled circles and colored links showing relationships between individuals. Using d3.forceSimulation with forceManyBody, forceLink, and forceCenter, the SVG visualization computes node positions and supports drag interactions. Node sizes and colors differentiate hierarchy levels, while link distances vary by relationship type. Data is defined in JavaScript modules and rendered via D3 selections for circles, lines, and text labels.

SSharmaAshwini

78% match

Loading thumbnail…

Network Graph ICE 8

A force-directed network graph maps seven hobby-related nodes, including Laptops, VR, Games, and Audience, with weighted links that vary in thickness. The graph uses d3.json to load the graphFile.json data, and a custom force layout (d3.layout.force) with gravity, distance, and charge settings to position nodes. Nodes are draggable SVG circles with text labels, rendered with yellow fill and red stroke, while links are purple lines with width proportional to the square root of each connection's weight.

RRahulChaitu999

78% match

Loading thumbnail…

Network Graph ICE-8

This network graph visualizes friendship connections among ten people, with nodes representing individuals and directed links showing relationships between them. The graph uses d3.forceSimulation with link, charge, collision, and center forces to position nodes. Dragging is supported through d3.drag. The data, loaded via d3.json, includes node groups and relationship types. All nodes are yellow circles with blue borders, and links display arrow markers. Hovering highlights a node by changing its stroke width. The visualization is rendered as SVG (1100x370) using D3 v6.

SSharanya1307

77% match

Loading thumbnail…

ICE 8 Network Graph

This interactive network graph visualizes connections among a group of friends, with nodes representing individuals and links showing relationships. The D3.js force-directed layout uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while d3-force provides drag interaction. Node colors come from d3.schemeCategory10 based on group membership (1 or 2). The SVG rendering includes node labels and link thickness scaled by connection value. Users can drag nodes to explore the network, with zoom functionality via d3.zoom.

Ddivyageethanjali

77% match

Loading thumbnail…

Social Network Graph - ICE-8

This interactive network visualization maps social connections among ten individuals, such as Suchitra, Rahul, and Cherry, based on friendship links from a local data.json file. Implemented in D3 v6 with SVG rendering, the graph layout is computed using the `d3.forceSimulation` API with link, many-body, collision, and centering forces. Nodes are rendered as large circles with labels, and directed edges include arrow markers to indicate relationship direction. Users can drag nodes to rearrange the network, with hover effects highlighting selected nodes.

Ssuchitra2602

77% match

Loading thumbnail…

ICE8-Network Graph

This network graph visualizes relationships between eleven named individuals, grouped into clusters, with a force-directed layout. Nodes are rendered as grey circles with black outlines, linked by red lines whose thickness corresponds to the numeric weight of each connection. The graph is built using D3 v2’s `d3.layout.force` for physics-driven positioning and drag interaction, reading graph structure from a local `graphFile.json`. Node labels are added via SVG `<text>` elements, and link widths are mapped with `Math.sqrt(d.weight)` for visual scaling.

RRahulSai05

76% match