Skip to main content
SimilarExport ZIP
100%

Social Media Network - Assignment 8

✓ Published0🌍 Public
AAKSHAY
Last edited Nov 9, 2025
Created on Nov 9, 2025
Forked from D3 Starter

This interactive network graph maps connections among six social media platforms—Facebook, Instagram, WhatsApp, YouTube, Twitter, and LinkedIn—with color-coded nodes and labeled links. Users can drag nodes to rearrange the layout while a force-directed simulation continuously repositions elements. Built with D3 v7, the visualization uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute the graph’s geometry, rendering nodes as SVG circles and links as lines. The data is defined inline as JavaScript arrays within the module.

AI-generated description

Social Media Network Visualization

A D3.js visualization showing the network connections between major social media platforms.

Features

  • Interactive network graph with 6 social media platforms
  • Nodes represent different platforms: Facebook, Instagram, WhatsApp, YouTube, Twitter, and LinkedIn
  • Color-coded nodes for easy distinction
  • Connection lines show relationships between platforms
  • Draggable nodes for interactive exploration
  • Force-directed layout for optimal node positioning

Platforms Included

  • Facebook (Red) - connects to Instagram and WhatsApp
  • Instagram (Blue) - connects to Facebook and YouTube
  • WhatsApp (Green) - connects to Facebook
  • YouTube (Purple) - connects to Facebook, Instagram, and Twitter
  • Twitter (Orange) - connects to LinkedIn and YouTube
  • LinkedIn (Cyan) - connects to Twitter

How to Use

  1. Open index.html in a web browser
  2. Hover over nodes to see interaction effects
  3. Click and drag nodes to reposition them
  4. The network will automatically layout using force-directed simulation
MIT Licensed

Similar vizzes

Loading thumbnail…

socialnetwork

This social network visualization displays seven social media platforms as labeled nodes, with weighted green links connecting them. The graph shows relationships between applications like Facebook, Instagram, and Twitter through varying line thicknesses. Using D3.js v4, the visualization implements a force-directed layout via the deprecated `d3.layout.force()` API, which simulates attraction and repulsion between nodes. Node positions are updated dynamically on each tick, while JSON data from `data.json` defines the network structure. The SVG rendering includes draggable circles, orange text labels, and a sky-blue background.

Vvaddepallinaveen
84% 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
83% match
Loading thumbnail…

A2-2-ASSIGN-8

This visualization shows a network of social media influencers, with nine nodes representing creators from YouTube, TikTok, and Instagram, connected by collaboration links. Nodes are pinned in rows by platform and use distinct shapes—circles, squares, and diamonds—to encode platform membership, while colors reinforce the grouping. Built with D3 v7, the example uses `d3.forceSimulation`, `forceLink`, and `forceManyBody` to position elements, though fixed coordinates (`fx`, `fy`) keep nodes in place. SVG rendering draws all links and node shapes, with a legend in the upper-left corner explaining the shape-color mapping.

Kkpavithrasai@gmail.com
83% match
Loading thumbnail…

Assignment 2_Activity-7 (2)

This social network graph visualizes friendships among eight individuals, with nodes representing people and directed links indicating friendship connections. The graph uses a physics-based layout where nodes repel each other while links maintain a fixed distance, creating an organized spatial arrangement. Users can drag nodes to explore the network structure, and hovering over a node highlights it with a green border. Built with D3 v6, the visualization employs `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position elements, with arrow markers indicating link direction. Data comes from an external JSON file, rendered as SVG with interactive drag and hover behaviors.

KKeerthiAnnem
83% match
Loading thumbnail…

Social Network

This social network graph visualizes the friendships between ten people using a force-directed layout. Nodes represent individuals and links show their connections, with all nodes colored orange and link thickness indicating relationship strength. Built with D3 v6, the visualization uses `d3.forceSimulation` with link, many-body, collision, and center forces to position nodes. Users can drag nodes to rearrange the network. Data comes from the embedded `data.json` file, with nodes labeled directly and rendered as SVG circles and lines.

AAshrith Kudidhi
81% match
Loading thumbnail…

Assignment 2 Question 7 Social network

This example displays a social network of named individuals connected by friendship links, rendered as an interactive node-link diagram in SVG with colored circles and text labels. It loads data from a local `graph.json` file and uses D3 v6’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes. Drag behavior and hover styling are implemented with D3’s drag handlers and CSS classes, with link thickness controlled by edge values.

Lleftymadi
81% match
Loading thumbnail…

Social Network Graph

The visualization shows a social network graph of eight friends, mapping their connections with pink circular nodes and blue arrowed links. It represents who is friends with whom, with all individuals initially clustered at the center. The graph uses D3.js version 6's physics-based simulation system, combining `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position nodes. Users can drag any node to rearrange the network, and hovering highlights a node with a thicker stroke. The data comes from a JSON file containing node and link definitions.

Aavvarijayakrishna99@gmail.com
81% match
Loading thumbnail…

Network

This interactive network graph visualizes a small social network of six people and their connections. Nodes are orange circles with labels, and links are gray lines; hovering turns a node red and displays a tooltip. Users can drag nodes to rearrange the layout. The visualization uses the D3.js library, specifically the `d3.forceSimulation` API with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` for physics-based layout, alongside custom drag functions and SVG rendering.

Hharshithamiriyam@gmail.com
81% match