ICE-8 Social Network Graph

ICE-8 Social Network Graph

This network graph visualizes the social connections among nine people, loaded from a local `graph.json` file. Node size is fixed, while the thickness of each link reflects the link's weight value. The visualization uses the D3.js v4 library with the force-directed layout from the older `d3.layout.force()` API, applying gravity, distance, and charge to spatially arrange the nodes. Nodes are draggable via `force.drag()`, with SVG circles and text labels for each person's name.

KKetha

ICE-8 Social Network Graph

The ICE-8 Social Network Graph visualizes a small network of eight people connected by friend relationships, with node size and link thickness reflecting relationship strength. The graph uses a force-directed layout via `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes dynamically. It renders on an SVG canvas with circles for nodes, text labels, and lines with arrow markers, all styled through external CSS. Nodes are draggable using `d3.drag`, and hovering triggers a CSS class change. The data comes from `data.json`, containing node IDs and link relationships with values.

Nnithish-1999

Social_Network_graph_ICE-8

A social network graph displays nine named individuals connected by weighted links, with node size fixed and link thickness proportional to edge weight. Using the D3 v4 force layout, the visualization loads data from a JSON file containing nodes grouped by affiliation and links with numeric weights. SVG elements render the graph, with green circles and black text labels for each person. The force simulation applies gravity, distance constraints, and charge to position nodes, while user interaction enables dragging. The code employs `d3.layout.force`, `.start()`, and tick handlers to update line and node positions dynamically.

Aayodhyanandh

ICE-8

A social network graph visualizes connections among six people, with nodes representing individuals and links showing weighted relationships. The force-directed layout spaces nodes dynamically, while circle size and link thickness convey the strength of each connection. Built with D3 v4, the example uses `d3.layout.force()` for physics-based positioning and SVG rendering. Node labels and colors distinguish groups, and the `force.on('tick')` callback updates positions in real time. Data comes from a local `data.json` file containing named nodes and weighted links.

VVenkat-Dhulipalla

ICE8 - Social Network Graph

A social network graph visualizes connections between nine individuals in a group, with nodes representing people and directed arrows showing relationships. The graph uses a force-directed layout via d3.forceSimulation, applying charge, collision, and center forces to position nodes dynamically. Nodes are rendered as SVG circles with labels, and the simulation updates their positions on each tick. Data comes from a JSON file containing node IDs and group assignments, while links define directed edges. The visualization supports interactive dragging of nodes and highlights nodes on hover using CSS class changes. The implementation uses D3 v6 with SVG rendering.

SSnapika

ICE8 - Social Network Graph

This network graph visualizes a small social network of ten people and their friendship connections, with each person shown as a pink circle and each friendship as a line with an arrow. The graph uses D3.js's force-directed simulation API, including `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter`, to position the nodes, which can be dragged interactively. Nodes and links are rendered as SVG elements, with data loaded from a local `data.json` file. Hovering over a node highlights it with a thicker stroke.

Nnehabaddam

ICE-8 Social Network graph

This visualization displays a social network with nine people as nodes and eight weighted connections as links, rendered as an SVG using D3.js. It shows relationships between individuals, where line thickness corresponds to link weight. The graph uses the D3 v4 `d3.layout.force` API for physics-based layout with gravity, charge, and distance parameters, allowing nodes to be click-dragged. Node positions update during the force simulation’s tick events, while labels and styled circles mark each person. Data comes from an embedded graph.json file containing names, group assignments, and connection weights.

HHarshinireddyy19

ICE-8 Social Network Graph

This example displays a small social network of ten named individuals, with nodes colored by group and edges weighted by connection strength. It uses D3 v4’s `d3.layout.force()` to simulate the layout, rendering nodes as green circles with labels and links as red lines. The graph supports dragging via `force.drag`, and loads its node and link data from a local `socialnetwork.json` file.

SShishiraRudrabhatla