Skip to main content
SimilarExport ZIP
100%

ICE - 8: Social Network Graph

✓ Published1🌍 Public
RRajeevMukhesh
Last edited Jul 9, 2022
Created on Jul 9, 2022

A social network graph built with D3.js v6 displays seven people as large cyan circles connected by directed, arrow-tipped lines labeled with each friendship. The nodes are positioned using a force-directed simulation (`d3.forceSimulation`) with link, charge, collision, and center forces. Users can drag nodes to rearrange the layout, while hovering highlights a node with a red border. Data comes from a JSON file containing node and link objects, rendered as SVG elements.

AI-generated description
MIT Licensed

Similar vizzes

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
93% 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
93% match
Loading thumbnail…

ICE8 - Social Network Graph

This example visualizes a social network graph, showing eight people (nodes) and their friendship connections (links) as red circles connected by black lines with arrowheads. The graph is rendered using SVG and D3.js v6, with node positions determined by the `d3.forceSimulation` API, including link, charge, collision, and center forces. Users can drag nodes to reposition them, and hovering highlights a node with a green border. Data comes from a JSON file specifying node IDs and relationships.

Mmosesimmanuelvemana@my.unt.edu
93% 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
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

This interactive graph visualizes friendship connections among eight people, with nodes representing individuals and directed links showing relationships. The graph uses a force-directed layout to position nodes, and users can drag nodes to rearrange the network. Implemented with D3 v6, it leverages `d3.forceSimulation` with link, charge, collide, and center forces, plus `d3.drag` for interactivity. Node sizes are fixed, and hover highlighting is handled via CSS classes. The data is loaded from a JSON file containing node and link definitions.

LLakshmiVandanaNunna
92% match
Loading thumbnail…

ICE8 - Social Network

This visualization shows a social network of nine people connected by friendship links, with each person represented as a gold circle labeled with their name. The network is rendered using D3 v6’s `d3.forceSimulation` with link, charge, collision, and center forces to position nodes. Node dragging is enabled via `d3.drag`, and hovering highlights a node with a green border using CSS classes. The data comes from a JSON file listing nodes and links with relationship metadata, drawn as SVG lines with arrow markers.

IIndhuKrishnaraj
92% match
Loading thumbnail…

ICE8 - Social Network Graph

A social network graph visualizes friendships among eight people as yellow-green circular nodes connected by labeled, arrow-tipped lines. The layout is computed with d3.forceSimulation, applying link, charge, collision, and center forces, while nodes are draggable via d3.drag. Data loads from a JSON file containing node and link arrays, rendered as SVG elements. Hovering highlights a node with a green stroke using CSS class toggling.

CCHANDU BHARGAVI
92% match