Question 4 – Social Network Visualization

100%

Question 4 – Social Network Visualization

✓ Published0🌍 Public

Last edited Nov 3, 2025

Created on Nov 3, 2025

A colorful force-directed friendship network visualizes six named people as nodes with labeled circles and connecting lines. The graph uses D3 v7's `d3.forceSimulation` with link, charge, and center forces to position elements, while `d3.scaleOrdinal` with `schemeSet2` assigns node colors. Rendered as SVG, the visualization supports drag interactions and displays a hover tooltip with each person's name.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

network

This example visualizes a social network as a force-directed graph, showing eight people and their friend relationships with links labeled by relationship type. Nodes are rendered as grey circles with names, and lines with arrowheads indicate directed connections based on a JSON data file. The graph uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while drag interactions let viewers move nodes. Hovering highlights nodes with a green stroke via CSS class toggling.

BBala Sai Krishna

88% match

Loading thumbnail…

network

This example visualizes a conceptual friendship network, showing seven people as circles connected by labeled links that represent relationships like "Close Friends" and "Project Partners." A force-directed layout simulation positions the nodes, repelling them apart while pulling connected nodes closer. The visualization is rendered as an SVG using D3.js v7, with the simulation and layout handled by `d3.forceSimulation` and its associated `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` APIs. Nodes are colored by group using `d3.scaleOrdinal` with `d3.schemeSet2`, and users can drag circles to interactively reposition the network.

Uumeshchandravegineti999@gmail.com

88% match

Loading thumbnail…

Social Network Graph

This social network graph visualizes friendship connections among eight named individuals, with nodes arranged through a force-directed layout and directed edges indicating relationship direction. Built with D3 v6, the visualization uses `d3.forceSimulation` with link, charge, and collision forces to position overlapping nodes, while each person appears as a red circle with an ID label and arrowed lines marking connections. Interaction includes dragging nodes via `d3.drag` and hover effects that highlight a node with a green stroke. Data comes from a local JSON file containing node groups and repeated link entries, rendered as SVG elements with markers for arrowheads.

GGabriel Guimaraẽs de Almeida

87% match

Loading thumbnail…

Social Network

The visualization displays a social network graph, mapping eight people and their friendships as nodes and connecting lines. It uses D3.js v6 to run a physics-based simulation, employing `d3.forceSimulation` with link, charge, and collision forces to position the nodes. The SVG renders pink links with arrow markers and interactive nodes that enlarge on hover and can be dragged, with data sourced from a local `network.json` file.

HHarshithaAmbilpur

86% match

Loading thumbnail…

Social Network Graph

This social network graph displays eight individuals connected through friendship links, with each node labeled by name and visualized as a green circle. The network structure is computed using `d3.forceSimulation` with force-based layout including link, charge, collision, and center forces, applied to data loaded from a JSON file. The SVG rendering includes drag-and-drop interaction via `d3.drag`, and hover effects highlight nodes by changing their stroke color. Marker arrows indicate link direction between source and target nodes.

Llikith1266

86% match

Loading thumbnail…

Social Network

A force-directed graph displays a social network of six people and five weighted connections, with nodes as orange circles and links as gray lines. Built using D3 v4, the visualization loads node and link data from a local JSON file and uses the `d3.layout.force()` API to simulate physical forces that position the nodes. Dragging is enabled via the force simulation's `drag` method, and each node includes a text label showing the person's name, with link thickness scaled by the `weight` value.

Ddheeraj1509

86% match

Loading thumbnail…

Social Network Graph

This interactive social network graph visualizes friendships among seven people using a force-directed layout. The D3.js visualization renders nodes as orange circles with name labels and directed arrows for edges, showing connections like David's links to Emma, James, Oliver, Sophia, and Liam. The graph uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes dynamically. Users can drag nodes to rearrange the network, with hover effects highlighting individual nodes. The example demonstrates D3 v6 imports via UNPKG, JSON data loading, and SVG rendering with mouse event handlers and drag behavior.

LLakshmanRangisetti

86% match

Loading thumbnail…

Activity 8 Q6B

This example shows a social network graph of people connected by friendship links, with each node labeled by name and laid out in a force-directed arrangement. The graph is rendered as an SVG using D3 v6, with green circles representing individuals and blue directed edges with arrow markers indicating relationships. The layout is computed with `d3.forceSimulation`, using link, charge, collision, and center forces to position nodes, while drag interaction is enabled via `d3.drag`. Node colors are assigned with a simple color scale, and data is loaded from a local `graph.json` file.

Ppasyasahas

86% match