ICE 8 - Social Network

ICE-8: Social Network

This example visualizes a social network as an interactive force-directed graph, showing connections among ten individuals grouped into four clusters. The SVG rendering uses D3 v4’s `d3.layout.force` (a predecessor to `d3.forceSimulation`) to simulate physical forces—gravity, charge, and link distance—that arrange nodes and edges dynamically. Node positions update on each “tick” event, while link stroke widths scale with the `weight` value from the `network.json` data. Users can drag and drop nodes via the force drag handler, with text labels and colored circles distinguishing each person.

RRebecca Moore

ICE 8 Social Network

A force-directed network graph visualizes a personal social network, with each person as a light blue circle labeled by name and connected by thick black links. It displays the relationships among friends from a JSON dataset loaded via `d3.json`. The layout uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while SVG circles and text elements render the final result, with positions updated on each simulation tick.

NNitheeshSama

ICE-8 Social Network

This interactive network visualization maps the social connections among eight individuals, each represented by a labeled circle. The graph is built using D3.js version 7 with SVG rendering. The code defines nodes and links as data structures and applies a force-directed layout using `d3.forceSimulation`, combining `d3.forceLink` for edges, `d3.forceManyBody` for repulsion, and `d3.forceCenter` for centering. The visualization updates dynamically, showing the network’s evolving structure as the algorithm iterates, with labels positioned relative to each node’s final coordinates.

DDan Waters

ICE8-Social Network Graph Diagram

This example shows a small social network of six people connected by seven directed relationships, rendered as an interactive node-link diagram. The visualization uses D3’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while SVG circles and lines represent people and connections. Users can drag nodes via `d3.drag` to reposition them, and hovering triggers the “nodeHover” CSS class to highlight a node. The code loads its data from a local `data.json` file, applies a single turquoise fill color to all nodes, and displays each person’s name as a text label.

Aaiswaryapalla

ICE - 8 - SOCIAL NETWORK

A social network of 11 named people and 11 weighted connections is visualized as a force-directed graph, with nodes representing individuals and link thickness encoding connection weight. The graph loads from a local `graph.json` file, and the D3 v4 library builds an SVG scene with circles and text labels. Using `d3.layout.force` with gravity, charge, and distance parameters, the simulation positions nodes dynamically, while user interaction enables dragging to rearrange the layout. Styling applies a pink-and-red color palette to links and node strokes.

Ggunasindhuja

ICE - Eight 2B - Social Network

This visualization shows a social network of 16 named individuals connected by 19 relationships, rendered as an interactive force-directed graph on an SVG canvas. The code uses d3.forceSimulation with forceLink and forceManyBody to position nodes and links, while d3.select appends circle nodes and line links. The network is laid out dynamically as the simulation runs, with node labels displayed in purple. The rendering approach is purely SVG with HTML and CSS styling on a lavenderblush background, driven by D3 v6.

CChi Aghaizu

ICE8 - Social Network

This example visualizes a social network as an interactive node-link diagram, showing friendships between ten people with each person represented as a labeled circle. The layout is computed using d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter, rendering as SVG. Data comes from a local JSON file. Links are drawn as blue lines with arrowheads, nodes are draggable via d3.drag, and hovering highlights nodes with a thicker stroke.

SSatyaVineeth

ICE8 : Social Network graph

This example visualizes a social network as an interactive force-directed graph. Eight people are connected by friend relationships, with each node represented by a colored circle and its name label. The graph uses D3 v6’s `d3.forceSimulation` with link, charge, collision, and center forces to position nodes, while SVG `<line>` elements with arrow markers depict the connections. Users can drag nodes to reposition them, and hovering highlights a node with a green stroke. Data is loaded from a JSON file containing node and link arrays.

DDeeraj Thakkilapati