Assignment 2 Question 7_Social Network Graph

100%

Assignment 2 Question 7_Social Network Graph

✓ Published0🌍 Public

Last edited Jul 22, 2023

Created on Jul 22, 2023

This interactive social network graph visualizes friendship ties among eight individuals, using a force-directed layout to position nodes and directional arrows to indicate relationship flow from source to target. The D3.js visualization loads JSON data containing person and friend node types, then applies `d3.forceSimulation` with link, charge, collision, and center forces to arrange the network. Users can drag nodes to reposition them, with hover effects highlighting selected circles. The SVG rendering displays uniformly orange nodes labeled with names, while arrowed links depict directed friendships between people like Jeh, Ali, and Peter.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Assignment 2 Question 7 Part 2

This interactive social network graph visualizes a friendship network of 11 people using data from graph.json. It renders the network as blue circular nodes with black borders and directed green arrow markers on blue links, using a physics-based D3 force simulation with d3.forceSimulation, forceLink, forceManyBody, forceCollide, and forceCenter. The visualization loads D3 v6 via UNPKG, uses SVG rendering, and supports drag-and-drop repositioning of nodes through d3.drag, with mouseover highlighting via the nodeHover CSS class.

MMichael Biancardi

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

91% match

Loading thumbnail…

Assignment 2 Q7-2 social network graph

This interactive social network graph visualizes connections between ten friends, with nodes representing individuals and directed edges indicating friend relationships. The graph uses D3 v6’s force simulation (d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCollide) to position nodes, while arrow markers on link lines show relationship direction. Users can drag nodes to rearrange the layout, and hovering highlights the focal node. Data comes from a local graph.json file, rendered as an SVG with circle nodes and text labels.

VVishnu Sudireddy

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

86% match

Loading thumbnail…

Social Network Graph

This interactive social network graph visualizes friend relationships among eight individuals using a force-directed layout. The visualization employs D3’s forceSimulation with link, charge, collision, and center forces to arrange nodes, while edges with arrow markers indicate directed friendships. Users can drag nodes, and hovering highlights connections through CSS class changes. The code loads data from a local JSON file and renders the network as SVG elements, including circles for people and labeled text, using D3 v6.

Ssuryavamsi00024

86% match

Loading thumbnail…

Social Network Graph

A social network graph visualizes friendship connections among eight people, with directed arrows showing relationships and yellow circular nodes representing each person. The layout uses a D3 force-directed simulation (`d3.forceSimulation`) with link, charge, collision, and centering forces to position nodes. Interactive drag behavior lets users move nodes, while hovering highlights them via CSS class changes. The graph is rendered as SVG with data loaded from a JSON file, using D3 v6.

AABCDB15

86% match

Loading thumbnail…

Social Network Graph

This social network graph visualizes friendships among eight people, with nodes representing individuals and arrows indicating directed connections. The graph uses a force-directed layout via `d3.forceSimulation` with link, charge, collision, and center forces to position nodes dynamically. Rendering as SVG, the code assigns green circles, labels each node, and decorates links with arrow markers. Hovering over a node highlights it via CSS class changes, and users can drag nodes to rearrange the network, with link thickness reflecting a numeric value from the JSON data source.

SSwapna1915

86% match