Skip to main content
SimilarExport ZIP
100%

Assignment 2 Q7-2 social network graph

✓ Published0🌍 Public
VVishnu Sudireddy
Last edited Jul 21, 2023
Created on Jul 17, 2023
Forked from D3 Starter

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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
90% 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
90% match
Loading thumbnail…

Assignment 2 Question 7_Social Network Graph

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.

Aanith462@gmail.com
90% 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
90% match
Loading thumbnail…

Network Graph-Activity8_task6.2

This interactive network graph visualizes a social network of ten people and their friendship connections, with nodes sized by friend count and directed edges showing relationships. The visualization uses D3.js v6 with a force-directed layout powered by `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes. Users can drag nodes via `d3.drag`, and hovering highlights nodes through CSS classes. The SVG rendering loads data from a local `graph.json` file, with nodes labeled and edges drawn as blue lines with arrow markers.

Ssreekarthanda@gmail.com
88% match
Loading thumbnail…

Activity_8-Graph

This social network graph visualizes friendship connections among ten people, with green circular nodes and blue directed edges carrying arrow markers. The visualization uses D3.js v6 with a force-directed simulation (`d3.forceSimulation`) that applies link, charge, collision, and centering forces to position nodes. Nodes are draggable and highlight on hover, while the data comes from a local JSON file containing node and link objects. The SVG rendering includes custom markers defined in the `defs` section, with text labels displayed inside each node.

Ssaipaidipalli
87% match
Loading thumbnail…

assignment 2 7q

This example shows a network graph of personal friendships between people, with pink circular nodes and orange labels connected by gray directed edges with red arrowheads. It uses d3.forceSimulation with link, charge, collision, and center forces to position nodes, while drag events let users reposition them. The data comes from data.json, rendered as SVG using D3 selections, with hover styling via the nodeHover class.

HHarshiiiiiiiip
87% match
Loading thumbnail…

Network Graph

This network graph visualizes a social network of ten friends, with nodes representing people and edges depicting their friendship connections. The graph is rendered as a static SVG, but users can drag nodes to rearrange the layout. The visualization is built using D3.js v6, specifically leveraging the `d3.forceSimulation` API for the physics-based layout, along with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter`. Node colors are uniform, and edge thickness is not varied, though link data includes a `value` attribute. Data comes from the included `graph.json` file.

Bbogasamudramvamsikrishnareddy
87% match