Fork of Fork of Social_Network_graph_ICE-8

100%

Fork of Fork of Social_Network_graph_ICE-8

✓ Published0🌍 Public

Last edited Jul 25, 2023

Created on Jul 20, 2023

Forked from Fork of Social_Network_graph_ICE-8

This interactive force-directed network graph visualizes social connections among nine individuals from a JSON file. Nodes represent people, colored by group, with blue circles and red labels, while black links show relationships with thickness proportional to connection weight. Users can drag nodes to rearrange the layout. The visualization uses the D3.js v4 library with the d3.force layout API to simulate physics-based node positioning within an SVG canvas.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Social_Network_graph_ICE-8

This force-directed network graph visualizes a small social network of nine people and their connections. The visualization uses D3.js (v4) to render SVG circles for individuals and lines for relationships, with line thickness indicating connection weight. The graph implements interactive dragging via the d3.layout.force API. Node labels appear in red text with blue circular markers. Data comes from graph.json, which defines nodes grouped by community and edges with assigned weights. The force layout algorithm positions nodes dynamically based on gravitational and charge parameters.

Mmanishcheruku

94% match

Loading thumbnail…

Fork of Social_Network_graph_ICE-8

This fork of the Social_Network_graph_ICE-8 example displays a small social network of nine named people, grouped into clusters, with eight weighted connections between them. The visualization uses D3 v4’s force layout to position nodes and links, rendering them as SVG circles and lines. Node labels appear in red text, while circles have blue fills and strokes. The code loads data from a JSON file, applies a force-directed simulation with gravity, charge, and distance parameters, and supports dragging nodes via `force.drag`. Link thickness reflects the numeric weight of each connection.

GGvl Naga Saikiran

93% match

Loading thumbnail…

Fork of Social_Network_graph_ICE-8

A social network graph displays nine named people as blue circles with red labels, connected by weighted black lines. The visualization uses the D3.js v4 library with the `d3.layout.force()` API to apply a force-directed layout, positioning nodes based on simulated physical forces with gravity, charge, and distance parameters. Circle radius is fixed, while link stroke-width reflects each connection's weight value from the JSON data source. The graph renders as an SVG element, and nodes are draggable, with their positions updated on each tick of the force simulation.

GGogineni44

93% match

Loading thumbnail…

Fork of Social_Network_graph_ICE-8

This example displays a small social network of nine named individuals grouped into five categories, with weighted links connecting them. It uses the D3.js library, specifically `d3.layout.force`, to simulate the network layout, rendering nodes as blue circles with red labels and edges as black lines whose thickness varies with link weight. The visualization is drawn as an SVG element and loads data from a local JSON file, allowing nodes to be dragged interactively via `force.drag`.

Aadapavaishnavi12

93% match

Loading thumbnail…

Fork of Fork of Fork of Social Network Graph - ICE-8

This interactive social network graph visualizes friendship connections among ten individuals, with nodes representing people and directed links showing their relationships. The D3.js v6 visualization uses a physics-based force simulation, combining `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` forces to position nodes with 75-pixel radius circles. Users can drag nodes to explore the network, with hover effects highlighting connections. The SVG rendering displays node labels in orange text, with the data loaded from a JSON file containing relationship weights and person identifiers.

GGvl Naga Saikiran

93% match

Loading thumbnail…

Fork of Social Network Graph-ICE-8

This interactive social network graph displays the connections between nine individuals, with lines representing friendship links and circles representing people. The visualization uses a force-directed layout, where nodes arrange themselves based on simulated physical forces, and users can drag circles to reposition them. The code leverages D3.js version 6 APIs including `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` to calculate the layout, while the data is loaded from a JSON file containing node IDs and link relationships. The SVG rendering includes hover effects that highlight nodes with a thicker stroke.

GGalineeharika

92% match

Loading thumbnail…

Fork of Fork of Social_Network_graph_ICE-8

This example shows a small social network of nine people, with links connecting them in a branching structure. Node circles are blue with black outlines, and each person’s name appears in red text beside their node. The graph uses d3.layout.force for physics-based layout, with gravity, charge, and distance parameters controlling the arrangement. Data is loaded from a local graph.json file, and both links and nodes are rendered as SVG elements, with link stroke widths scaled by the weight of each connection. Nodes are draggable via force.drag.

Mmanishcheruku

92% match

Loading thumbnail…

Fork of Social_Network_graph_ICE-8

A force-directed network graph visualizes nine people grouped into five communities, with weighted links connecting them. The graph uses a circular node layout with blue circles, red text labels, and black lines whose thickness corresponds to link weight. Built with d3.v4 and d3.layout.force, it loads node and link data from a JSON file, applies gravity, distance, and charge parameters, and enables dragging of nodes. The SVG rendering updates positions on each tick via the force event.

Wwisam-ahmed

92% match