Saahithi Social Network

100%

Saahithi Social Network

✓ Published0🌍 Public

Last edited Jul 10, 2022

Created on Jul 9, 2022

A force-directed network graph displays friendships among people in an example social network. Nodes are rendered as purple circles with labels, and directed links with arrowheads represent friend relationships. The code builds the visualization using `d3.forceSimulation` with link, charge, collision, and center forces. Nodes are draggable via `d3.drag`, and hovering applies a CSS class to change the stroke. The data comes from `data.json`, and the SVG is given a `viewBox` for scaling.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

86% match

Loading thumbnail…

Saipriya ICE-8 Social network

This example shows a social network graph of individuals and their friendship relationships. D3’s force simulation (`d3.forceSimulation`) with link, charge, collision, and center forces positions nodes, which are rendered as yellow circles connected by arrowed lines. The graph loads node and link data from a JSON file, supports dragging via `d3.drag`, and highlights nodes on hover through CSS classes. The visualization is built with D3 v6 and SVG in a React environment.

SSaiipriiya

86% match

Loading thumbnail…

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

86% match

Loading thumbnail…

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

85% match

Loading thumbnail…

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

85% match

Loading thumbnail…

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

85% match

Loading thumbnail…

Network Graph

This network graph visualizes a social network of individuals and their friendships. Ten nodes represent people, and twelve links show connections, with a thicker line indicating a stronger friendship between "MY3" and "Sudha". The visualization uses a physics simulation to position the nodes, employing `d3.forceSimulation` with link, charge, collision, and center forces for a clear, spread-out layout. SVG rendering is used, and the code defines draggable nodes using D3's drag interaction, with a green arrow marker on each link to show direction. The data is loaded from a JSON file, and node colors are a simple light green.

Vvineelaramulapalli32

85% match

Loading thumbnail…

Network Graph

This example displays a social network graph of individuals connected by friendship links. It uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, which are rendered as labeled circles and drawn with SVG. The data comes from a local graph.json file, and the visualization demonstrates drag interactions and hover highlighting, with lines styled in blue and arrow markers indicating link direction.

BBhavyaMammai

85% match