Skip to main content
SimilarExport ZIP
100%

Assignment 2_Activity-7 (2)

✓ Published0🌍 Public
KKeerthiAnnem
Last edited Jul 22, 2023
Created on Jul 21, 2023

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.

AI-generated description
MIT Licensed

Similar vizzes

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
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…

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 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…

Activity 8_Task6(graph)

This interactive network graph, built with D3.js (v6) and rendered as SVG, visualizes a social network of friends. Nodes represent people, and lines indicate "Friend with" relationships. The graph is constructed using `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to position the nodes. Users can drag nodes, while hovering highlights them. The data is loaded from a JSON file, with line thickness reflecting relationship strength.

KKeerthiAnnem
89% 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
88% match
Loading thumbnail…

Activity8_Task6_NetworkGraph

A social network graph displays ten people connected by “Friend with” relationships, with node size and link thickness varying by connection value. The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while drag interaction lets viewers rearrange the layout. Nodes render as SVG circles with labels, and links are drawn as lines with arrow markers, all colored by a simple green palette. Data loads from a local graph.json file containing the node and edge definitions.

HHarshithaAmbilpur
87% match
Loading thumbnail…

Activity8_Task6_2

This network graph visualizes a social network of people connected by "Friend with" relationships, with node size and link strength reflecting the data’s value. It uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while drag interactions are enabled via d3.drag. Nodes are rendered as circles with labels, and links are drawn as lines with arrowhead markers, all in SVG. The graph loads data from a local graph.json file and displays ten nodes with varying connection frequencies, highlighting a central hub named Indu.

Cchsaisriharsha@gmail.com
87% match