Network Graph-Activity8_task6.2

100%

Network Graph-Activity8_task6.2

✓ Published0🌍 Public

Last edited Jul 18, 2023

Created on Jul 18, 2023

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.

AI-generated description

Network graph

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity8_Task6_Network Graph

A social network graph visualizes friend connections among ten people, with nodes labeled by name and linked by directional lines with arrow markers. The network uses D3's force-directed layout (`d3.forceSimulation`) with link distance, charge, collision, and centering forces to position nodes. Nodes are green circles with white strokes that highlight yellow on hover, while links are blue. The data loads from a local `graph.json` file, and the visualization renders entirely as SVG, with drag interactions enabled via D3's `d3.drag` behavior.

Rrikhitakoganti12

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

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

92% match

Loading thumbnail…

activity 8- network

This interactive network graph visualizes a social network of ten people, with circular nodes representing individuals and directed blue lines with markers indicating friendships. The visualization uses D3.js v6 with its force-directed simulation API (`d3.forceSimulation`) to position nodes, applying link, many-body, collision, and centering forces. Data is loaded from a local JSON file, rendered as an SVG, and styled with CSS. Nodes are draggable, and hovering highlights connections through a focus class.

Mmandadi1999

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

90% match

Loading thumbnail…

Network Graph

This network graph visualizes a small social network of ten people and their friend relationships, with each node labeled by name and connected by directed links. The graph uses a force-directed layout via `d3.forceSimulation` with link, charge, collision, and centering forces, rendering nodes as green circles and links as blue lines with arrow markers. Node colors are assigned using `scaleOrdinal`, and nodes are draggable through `d3.drag`, with hover highlighting. Data comes from a local `graph.json` file, and the visualization is built with D3 v6 and SVG.

Ssrikkanth05

90% match

Loading thumbnail…

Network Graph

This network graph displays a social network of ten people connected by friendship links. The visualization uses a force-directed layout via `d3.forceSimulation` with link distance, charge, collision, and centering forces. Nodes are rendered as green circles with labels in an SVG, and links appear as blue lines with arrow markers. Each node is draggable, and hovering highlights the circle. Data comes from `graph.json`, loaded with `d3.json`. The code imports specific functions like `select`, `scaleOrdinal`, and `selectAll` from D3 v6.

VVenkat-Sumith-Thota

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

90% match