Social Network -Aishwarya M

100%

Social Network -Aishwarya M

✓ Published1🌍 Public

Last edited Apr 4, 2022

Created on Apr 3, 2022

This interactive network graph visualizes social connections between seven individuals, with node size representing the weight of each connection and thicker orange links indicating stronger relationships. The visualization uses D3.js v4 with a force-directed layout algorithm to position nodes, allowing users to drag and rearrange the network. Node labels appear in yellow text, while circles use a red fill with lime borders against a gray background, with the data loaded from a JSON file containing node names, group assignments, and weighted link values.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

network

This network visualization shows a small social graph of seven named individuals with weighted connections between them, rendered as green nodes with yellow labels on a black background. The force-directed layout, built with d3.layout.force from d3.v4, positions nodes and links while supporting drag interaction. The code loads data from data.json via d3.json, then uses SVG line elements for links with stroke-width determined by the square root of each link's weight, and groups for nodes with attached circles and text labels.

Ddivyagunuguntla

83% match

Loading thumbnail…

Social Network Graphic

This interactive social network graphic visualizes connections among six individuals (Pawan, Shiva, Manikanta, Vamshi, Ashwin, and Laxman) using a force-directed layout. Nodes are rendered as blue circles with labels, while orange links between them have stroke widths proportional to relationship weight. The visualization uses D3 v4 and v2 APIs, specifically `d3.layout.force()`, to simulate node attraction and repulsion, enabling click-and-drag repositioning of nodes. The graph data originates from `graph.json`, and the SVG output updates node positions and link coordinates on each simulation tick.

SShivaKarpe

83% match

Loading thumbnail…

social Network graphic

This interactive social network graphic visualizes the relationships among ten individuals grouped into four clusters. The visualization uses a force-directed layout, where nodes are connected by weighted links displayed as blue lines. Node labels show names, and circles represent each person. The example employs D3.js, specifically the `d3.layout.force` API for physics-based positioning and drag-and-drop interaction. It loads node and link data from `graphFile.json` and renders the network as SVG elements.

Pprashanth yamala

82% match

Loading thumbnail…

social network graph

This interactive social network graph visualizes relationships among seven individuals, with nodes representing people and links denoting connections. Node size and link thickness reflect connection weights from the graphFile.json dataset. The graph uses d3.layout.force for physics-based positioning, allowing users to click and drag nodes to rearrange the network. D3 v4 renders the visualization as SVG elements, with circles for nodes and lines for links, while text labels display each person’s name. The force simulation adjusts node positions on each tick, creating an animated, explorable representation of social ties.

RRupeshGandham

82% match

Loading thumbnail…

Social Network graph ICE-8

This interactive social network graph visualizes connections between nine individuals, with nodes grouped by community and linked by weighted edges. The layout uses a force-directed algorithm (d3.layout.force with gravity, distance, and charge parameters) that positions nodes dynamically within an 900x600 SVG canvas. Node styling comes from CSS classes for circles (blue stroke, lightpink fill) and labels (black text with green stroke), while edge thickness maps to link weight. The graph is rendered in SVG, with data loaded from the graph.json file, and nodes are draggable via the force.drag interaction. The visualization uses D3.js v2/v4 APIs for rendering and force simulation.

Ggayathrikavya

81% match

Loading thumbnail…

Social Network

The visualization displays a small social network of seven people, with weighted links indicating relationship strength. It uses a force-directed layout to position nodes, allowing users to click and drag them around the canvas. The graph is rendered as an SVG using D3.js, with brown strokes for links and silver circles with royal blue borders for nodes. Data comes from a local JSON file containing node names and link weights. The code relies on d3.layout.force() for the physics simulation, with node labels positioned to the right of each circle.

LLakshmipriya-kalapala

81% match

Loading thumbnail…

My Social Network Visualization

This example presents a social network as an interactive node-link diagram, where red circles represent individuals and weighted red lines show connections between them. Seven people, including Prathyusha, Kavi, and Teja, are arranged within a force-directed layout that positions related users closer together. The visualization uses the D3.js v4 library with the older `d3.layout.force` API to simulate physical forces of gravity, charge, and link distance, enabling smooth movement as nodes are dragged. Node labels appear in green, and the diagram is rendered as an SVG, with data loaded from an external JSON file containing node names and link weights.

PPrathyusha Jampala

81% match

Loading thumbnail…

Social Network graph

This interactive network graph visualizes social connections among nine individuals, with nodes representing people and links showing relationships weighted by thickness. Users can drag nodes to reposition them, while hovering reveals tooltips displaying each person's name. Built with D3.js v4, the visualization uses `d3.layout.force` for physics-based layout, SVG for rendering, and custom mouse event handlers for the tooltip interactions. Data comes from the embedded graph.json file, which defines node groups and link weights.

Rrallabandisushen@gmail.com

81% match