ICE-8 Social Network graph

100%

ICE-8 Social Network graph

✓ Published1🌍 Public

Last edited Apr 4, 2022

Created on Apr 4, 2022

A labeled node-link diagram maps nine people in the ICE-8 social network, with circle nodes positioned by a force-directed layout and links weighted by stroke thickness. The visualization uses the D3 v4 force layout (`d3.layout.force` with charge and size settings) to simulate node positions, while SVG elements render the graph, with circles, text labels, and drag interaction enabled via `force.drag`. Data comes from the bundled `graph.json` file.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

92% match

Loading thumbnail…

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

92% match

Loading thumbnail…

Social Network Graph ICE-8

A force-directed social network graph shows nine people arranged in groups, with links weighted by thickness to indicate connection strength. The visualization uses D3.js v4 with the legacy `d3.layout.force` API, rendering nodes as blue circles with green strokes and black labels via SVG. Data comes from a local `graph.json` file, and nodes are draggable through the force drag behavior, updating positions on each tick event.

SShridhar Kshirsagar

91% match

Loading thumbnail…

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

91% match

Loading thumbnail…

ICE-8 (Social Network Graph)

This social network graph visualizes relationships among nine individuals, with nodes sized and colored by their connection count and curved links showing ties. The visualization uses D3 v5’s `d3.forceSimulation` for layout, with forces for centering, charge, and link distance. Node drag and drop via `d3.drag` repositions elements, while labels display names. Links are rendered as SVG paths with varying stroke styles, and node fill uses `d3.interpolateBlues` based on weight.

AAashish Pandey

91% match

Loading thumbnail…

ICE-8 Social Network Graph

A force-directed network diagram visualizes social connections among ten individuals, with node size fixed and link thickness scaled by relationship weight. The graph uses D3 v4 with an SVG rendering and a custom force layout configured through `d3.layout.force()`, applying gravity, charge, and distance parameters to position nodes. Node labels display names, while draggable circles allow interaction with the network. Data is loaded from a local `network.json` file, defining node groupings and weighted links between them.

AAmanullah007

91% match

Loading thumbnail…

ICE-8: Social Network graph

This example shows a small social network of nine people, grouped into four clusters, with weighted links connecting them. The visualization uses a force-directed layout to position nodes and edges, which are rendered as SVG circles and lines. The code employs d3.layout.force, the v2/v4 D3 API, and force.drag to make nodes interactive. Node names appear as text labels, and link thickness reflects the weight value from the JSON data file.

PPrasanth Damarla

91% match

Loading thumbnail…

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

91% match