ICE-8 (Social Network Graph)

100%

ICE-8 (Social Network Graph)

✓ Published0🌍 Public

Last edited Apr 5, 2022

Created on Apr 5, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 (Social Network Graph)

This example shows a social network graph with nine named people connected by curved links. Node size and fill intensity reflect each person’s degree of connectivity, based on the number of incident links. The visualization uses D3 v5’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while a custom `tick` function draws curved SVG paths between connected individuals. Nodes are rendered as circles with labels and support dragging via `d3.drag`.

AAnjan Shrestha

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

93% match

Loading thumbnail…

ICE-8 Social Network

This visualization displays a social network graph representing the relationships among nine individuals, with nodes connected by weighted links. The code uses d3.layout.force (the v3-style force layout) to position nodes, with link thickness based on the square root of each connection's weight. Circles and text labels are rendered as SVG elements, and users can drag nodes to rearrange the layout. A yellow tooltip appears on hover to show each person's name, while the force simulation continuously updates node and link positions.

AAbhinav-Mullapudi

93% match

Loading thumbnail…

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

93% match

Loading thumbnail…

ICE8 - Social Network Graph

This interactive network graph visualizes social connections among nine individuals, with undirected links representing friendship and each node labeled with a person's name. The graph uses a physics-based layout via D3's `forceSimulation`, incorporating link, many-body charge, collision, and center forces to position nodes. Users can drag nodes to rearrange the network, with hover highlighting indicating the selected node. The data comes from a JSON file, rendered as SVG circles and lines.

PPriyanka7002

93% match

Loading thumbnail…

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

92% match

Loading thumbnail…

ICE8 - Social Network Graph

This D3.js network graph visualizes social connections among eight people, with nodes representing individuals and lines representing friendships. The graph uses a force-directed layout with `d3.forceSimulation`, combining link forces, many-body repulsion, and collision detection to position nodes, while user interaction via `d3.drag` allows repositioning. Hovering highlights a node. The SVG rendering employs arrow markers for link endpoints, and the underlying data comes from a JSON file listing node groups and directed link relationships with weights.

AAditya Pujari

92% match

Loading thumbnail…

ICE8 - Social Network Graph

A social network graph displays individuals as orange circular nodes connected by blue directed links, with node labels and arrowheads indicating the direction of relationships. The visualization uses a force-directed layout via `d3.forceSimulation`, incorporating link distance, charge repulsion, collision detection, and center positioning. Nodes are rendered as SVG circles with drag interaction and hover highlighting, while links include marker-end arrows. The graph loads person-to-person friendship data from a JSON file, with all nodes initially assigned the same group value. The implementation relies on D3 v6 APIs including `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter`.

AAli Shah Solanki

92% match