ICE-8 Social Network graph

100%

ICE-8 Social Network graph

✓ Published1🌍 Public

Last edited Apr 5, 2022

Created on Apr 5, 2022

A force-directed network graph shows character relationships from the television show Brooklyn Nine-Nine. Nine nodes represent characters, and eight weighted links show connections between them. The visualization uses the D3 v4 library, though it also loads the older d3.v2 library. The code uses the d3.layout.force API to compute a physics-based layout with gravity, charge, and distance parameters. The SVG rendering displays orange circles for nodes and blue lines for links, with stroke-width proportional to link weight. Nodes are draggable via the force.drag callback.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

83% match

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

83% match

Loading thumbnail…

ICE8 - Social Network Graph

A social network graph displays eight people as green circular nodes connected by nine directed links, with thicker lines indicating stronger friendship values. The network layout is computed using d3.forceSimulation with link distance, charge, collision, and centering forces on an SVG canvas. Nodes are draggable via d3.drag, and hovering highlights a node with a green stroke class toggled by mouseover and mouseout events. The data, loaded from a JSON file, specifies relationships and node groups, rendered with D3 v6 selections and a color scale.

RReyden Harris

83% match

Loading thumbnail…

ICE-8 Network Graph

This visualization displays a network graph of friendship connections among eight individuals (nodes) using a force-directed layout. The graph renders nodes as circles with labels and links as directed lines with arrow markers to indicate relationship direction. The code employs d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while d3.json loads the data. Interactions include dragging nodes and mouseover highlighting of nodes.

VVamsi Krishna

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

83% match