Social Network Graph by Tejaswi_Tummala

Network Graph

This network graph visualizes a social network of people connected by friendship links. The data, loaded from a JSON file, defines ten nodes and twelve directed relationships with varying edge weights. Built with D3 v6, the visualization uses `d3.forceSimulation` for physics-based layout, with forces for links, many-body repulsion, collision, and centering. Nodes are rendered as large green circles with red labels, and links are drawn as blue lines with arrow markers. Viewers can drag nodes to reposition them.

JJayanthKumarkoni

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

Network Graph

This interactive network graph visualizes a social network of friends, with nodes representing individuals and links showing their relationships. The visualization uses force-directed layout through d3.forceSimulation with link, charge, collision, and center forces to position the nodes. Users can drag nodes to rearrange the network. Data is loaded from a local JSON file, and the graph is rendered as SVG elements including circles for nodes and lines for links, with arrow markers indicating relationship direction. Hovering highlights individual nodes.

Hharipriyaa07

Network Graph

This social network graph visualizes a small group of people as nodes with green circles and blue, arrow-tipped links representing friendships. The layout is computed using `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter`, while nodes are draggable via `d3.drag`. Friend connection strength is encoded by line thickness, based on the `value` field in the loaded `graph.json`. Hovering a node highlights it via CSS class changes, and all elements are rendered as SVG.

VVinay Vemuri

Network Graph

A social network graph visualizes friendships among ten people using a force-directed layout. Nodes are rendered as labeled circles, with links drawn as directed lines and arrow markers. The visualization loads data from a local JSON file and uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to position the elements. Users can drag nodes to rearrange the network, and hovering highlights them. The SVG output is styled with custom CSS.

Aaniteshterala2000

Social Network

This social network graph visualizes friendship connections between people, with each node labeled by name and linked by directed edges using arrow markers. The graph uses a force-directed layout via `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes and reveal clustering. Nodes are interactive circles with hover effects and dragging support, rendered as SVG using D3 v6’s `select` and `selectAll` APIs. The data is loaded from a JSON file containing nodes and links with relationship metadata.

Ssudeepmamidi

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

Social Network Graph

This example visualizes a small social network as a node-link diagram. The network graph shows eight people (nodes) and their “Friend with” relationships (links), with the link thickness between "july" and "tanu" indicating a higher connection value. The layout is generated by a force simulation, using `d3.forceSimulation` with link, charge, collision, and center forces to position nodes. The graph is rendered as SVG, with nodes as circles and links as lines with arrow markers, and users can drag nodes to explore the network.

AArun Pratap