ICE-8 Social Network Graph (Nagaraju Obbineni)

100%

ICE-8 Social Network Graph (Nagaraju Obbineni)

✓ Published1🌍 Public

Last edited Jul 10, 2022

Created on Jul 9, 2022

A social network graph visualizes connections among nine named individuals, with nodes and links displayed in an animated SVG layout. The graph uses force-directed positioning via `d3.layout.force` from D3 v4, with node positions updated on each tick. Circles represent people, labeled with their names, while link thickness reflects connection weight. Hovering over a node triggers a yellow tooltip showing the person's name, implemented with mouseover and mousemove events. Data comes from a local `graph.json` file, and the visualization supports click-and-drag node repositioning.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

86% match

Loading thumbnail…

ICE-8 Social Network Graph (Dhanusree Kodali)

This interactive network graph visualizes a social network of nine individuals and their connections, using node-link diagrams to represent people and their relationships. The visualization is built with D3.js v4 and React, rendering SVG elements with animation. The force-directed layout is powered by `d3.layout.force()` with custom gravity, distance, and charge parameters, while nodes are draggable and display tooltips on hover. Data is loaded from an external JSON file containing node groups and weighted links, with link thickness proportional to connection weight.

DDhanusree Kodali

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

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

86% match