Social Network graph to show Co releation

100%

Social Network graph to show Co releation

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 13, 2023

This example uses a D3.js force-directed layout to visualize the relationships between Tamil movie heroes, where circle nodes represent actors and connecting lines show their co-relations with varying thickness based on a weight value. The graph reads from a data.json file, using d3.layout.force (an older D3 v4 API) to apply gravity, distance, and charge physics for node positioning. The SVG rendering supports interactive node dragging, with the code styling circles, links, and text labels to display actor names and connection weights.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Network graph of social connection

This example shows a network graph of social connections, with nodes representing characters from a fictional world and links indicating relationships between them. The graph uses D3’s force layout (d3.layout.force) to position nodes, which are rendered as purple circles with dark outlines and labeled with names. Links appear as black lines, and link thickness is set based on a numeric weight attribute when present. Users can click and drag nodes to rearrange the layout, which updates in real time. The visualization reads data from a local JSON file and renders entirely in SVG.

SSamanvitha1

79% match

Loading thumbnail…

Social Network graph

A social network graph visualizes connections between seven named individuals, such as NTR, Ramcharan, and Ram, using circles and labeled text for nodes and green lines for links. The force-directed layout, created with d3.layout.force, positions nodes based on gravity, charge, and distance parameters, while link weights control stroke width. Dragging is enabled via force.drag, and node positions update during the tick event. Data loads from a JSON file containing nodes and links, rendered as SVG elements with inline styling.

RRadhakrishna246

78% match

Loading thumbnail…

Network Graph

This example shows a social network graph where ten people are connected by friendship links. The force-directed layout positions nodes and edges, with the thickness of the blue lines indicating the strength of the relationship, such as the stronger connection between MY3 and Sudha. The visualization is built with the D3 library, using `d3.forceSimulation` to handle the physics of the node placement, along with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to manage the layout. Node elements are created as SVG groups with circles and text labels, and the graph supports interactive dragging. The data comes from a local `graph.json` file which provides both the network structure and the relationship values.

LLakshmanRangisetti

78% match

Loading thumbnail…

Social Network

This example displays a small social network as a force-directed graph, with nodes representing named individuals and lines (links) sized by a numeric weight. It uses the older `d3.layout.force` API from D3 v4 (and also loads D3 v2) to simulate physical motion, making nodes draggable and repositioning linked elements on each tick. Data comes from a local JSON file, and the rendering is done with SVG circles, text labels, and lime-colored line elements, all styled via inline CSS.

VVaishnavi6199

77% match

Loading thumbnail…

Social Network

VVaishnavi6199

77% match

Loading thumbnail…

Network Graph

A network graph shows social connections among ten individuals, with nodes representing people and lines indicating friend relationships. The graph uses a force-directed layout powered by d3.forceSimulation, with collision detection and charge forces to position the nodes. Nodes are rendered as circles with labels, and links include arrow markers. The visualization is built with D3 v6 and renders to SVG, reading data from a JSON file. Users can drag nodes to reposition them, and hovering over a node triggers a CSS class change for visual feedback.

MManideeprenikindi

77% match

Loading thumbnail…

Social Network Graph

This social network graph visualizes the relationships between individuals, with nodes representing people and links representing their connections. The network layout is computed using D3.js force-directed algorithms, specifically `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to position nodes based on their interactions. Users can drag nodes to explore the graph, and hovering highlights a node with a green stroke. The visualization is rendered as an SVG using React, with data loaded from a JSON file.

Ggeethanjalikotaru

77% match

Loading thumbnail…

Network Graph

This network graph visualizes social connections between friends, with nodes representing individuals and links showing relationships where thicker lines indicate stronger ties. The visualization uses a D3.js force simulation (d3.forceSimulation, d3.forceLink, d3.forceManyBody) to position nodes and manage collisions, while drag interactions allow users to manually reposition nodes. Data is loaded from a local graph.json file, and the SVG rendering includes green arrow markers on links, color-coded nodes, and hover effects that highlight selected connections.

SSwapna1915

77% match