ICE-8 Social Network Graph (Dhanusree Kodali)

100%

ICE-8 Social Network Graph (Dhanusree Kodali)

✓ Published1🌍 Public

Last edited Jul 9, 2022

Created on Jul 9, 2022

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Social Network graph ICE-8

This interactive social network graph visualizes connections between nine individuals, with nodes grouped by community and linked by weighted edges. The layout uses a force-directed algorithm (d3.layout.force with gravity, distance, and charge parameters) that positions nodes dynamically within an 900x600 SVG canvas. Node styling comes from CSS classes for circles (blue stroke, lightpink fill) and labels (black text with green stroke), while edge thickness maps to link weight. The graph is rendered in SVG, with data loaded from the graph.json file, and nodes are draggable via the force.drag interaction. The visualization uses D3.js v2/v4 APIs for rendering and force simulation.

Ggayathrikavya

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

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

91% match

Loading thumbnail…

ICE 8 - Social Network

An interactive social network visualization displays nine named individuals connected by weighted links. The graph uses D3’s `d3.layout.force` for physics-based layout, rendering nodes as rounded rectangles with gold fills and blue strokes, along with name labels. Links appear as black lines whose stroke width corresponds to each connection’s weight value. Data comes from a local `graph.json` file, and the visualization supports dragging nodes to reposition them, with the force simulation updating positions on each tick.

KKevin Raj

91% match

Loading thumbnail…

ICE-8 Social Network graph

This example visualizes a small social network of nine individuals grouped into five clusters, with red links of varying thickness indicating the strength of connections between them. Built with D3.js v4 and vanilla JavaScript, it loads data from a JSON file (`graph.json`) containing node names and weighted link values. The layout uses `d3.layout.force` with gravity and charge settings, rendering nodes as aqua circles with bold labels and enabling click-and-drag interaction. Edges are drawn as SVG lines, with stroke width scaled by the square root of each link's weight.

CChathurya

90% match

Loading thumbnail…

Social_Network_graph_ICE-8

This interactive network visualization shows the relationships between individuals in a social group, with nodes representing people and links representing connections. The graph uses a force-directed layout to position nodes, visually separating them into clusters based on their group assignments. Built with D3.js v4 and React, the code leverages the `d3.layout.force()` API to simulate attractive and repulsive forces between nodes, while SVG elements render the graph with styled links and nodes. Node labels display each person's name, and the simulation updates positions in real-time.

Rrajasrilekkala

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

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

90% match