Fork of Network graph

100%

Fork of Network graph

✓ Published0🌍 Public

SSaikiran2029

Last edited Apr 3, 2022

Created on Apr 3, 2022

This network graph displays a LinkedIn-style social network, with eight named nodes connected by weighted links. The code loads JSON data with `d3.json` and uses the older `d3.layout.force` API to simulate a force-directed layout within an SVG. Node labels are drawn in orange text, while link thickness reflects each connection’s weight value. The visualization shows relationships between individuals such as sam, raju, and saleem, with graph positions updated on each tick event to settle the layout.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Social Network graph

This interactive force-directed graph visualizes a small social network of nine people connected by eight weighted links, with node labels showing names and link thickness encoding connection weight. The visualization uses D3.js v4 with the legacy `d3.layout.force` API, rendering nodes as red circles with yellow strokes and black connecting lines in an SVG container. Users can click and drag individual nodes to rearrange the network, while the simulation updates positions during tick events to maintain the layout. The data comes from a local `graph.json` file with node and link arrays.

SSaiSree0122

88% match

Loading thumbnail…

Fork of Social Network

This network visualization displays a small social graph with six named nodes and five weighted links connecting them. The visualization uses a force-directed layout to position nodes, with link thickness scaled to the square root of each link's weight. The code relies on d3.v4.js and the older d3.layout.force API to calculate node positions and handle dragging. Links are rendered as orange SVG lines, while nodes appear as blue circles with purple labels taken from the data.json file.

Kkalyanikotha

87% match

Loading thumbnail…

Fork of Social Network graph

This is a fork of a social network graph that visualizes connections between nine named individuals using a force-directed layout. The visualization loads data from a `graph.json` file, which contains nodes grouped by category and weighted links between them, and displays it as red circles connected by black lines whose thickness corresponds to link weight. The graph uses the older `d3.layout.force` API to simulate node movement, with drag-and-drop interaction enabled via `force.drag`. The example is implemented in React and renders to SVG, with node labels shown as text next to each circle.

SSaiSree0122

86% match

Loading thumbnail…

Network map

This network map visualizes a small LinkedIn-style social graph, showing eight people as labeled circles and their connections as orange weighted lines. The graph uses a force-directed layout with D3’s `d3.layout.force()` to position nodes, with gravity, charge, and distance parameters controlling the spacing. The HTML/SVG canvas is built with `d3.select`, and node positions are updated on each tick via the force layout’s `on("tick")` event, while link thickness reflects the `weight` field from the JSON data.

SSaikiran2029

86% match

Loading thumbnail…

Fork of fork

This social network visualization displays nine named individuals connected by weighted links, with node positions determined by a force-directed layout. Using the D3 v4 library through the `d3.layout.force()` API, the code creates a SVG canvas with yellow circular nodes labeled with each person’s name, while black link strokes vary in thickness according to the connection weight. The network is interactive, allowing dragging of nodes via the force layout's drag functionality, with gravity, distance, and charge parameters controlling the spatial arrangement. Data comes from a local JSON file containing node group assignments and link weights.

TTekmal-Bhavana

85% match

Loading thumbnail…

Fork of Social Network Visualization

This visualization shows a small social network graph with seven named friends connected by blue weighted links and green circular nodes. Each node displays a person’s name in maroon, and the graph is interactive, allowing users to drag nodes around the SVG canvas. The implementation uses D3.js v4’s `d3.layout.force` with gravity, charge, and distance parameters to position nodes, while a separate D3 v2 script is also loaded. Node and link styling are handled via CSS classes, with link thickness determined by the `weight` value from the `network.json` data source.

Kkarumanchimanasa

85% match

Loading thumbnail…

Fork of SOCIAL NETWORK

A force-directed network graph displays ten named nodes and nine weighted links, using red edges and blue circles with lime text. The visualization loads node and link data from a local `network.json` file, then applies a `d3.layout.force` simulation with gravity, charge, and distance parameters. SVG renders circles and lines, while node labels appear as text elements; user interaction enables drag-and-drop via `force.drag`. Link stroke widths scale by `Math.sqrt(d.weight)`, and the running simulation updates positions on each tick event.

VVineela Reddy

84% match

Loading thumbnail…

Fork of Fork of Network graph

This network graph displays eight employees and their weighted connections using a force-directed layout. The visualization reads data from a local `data.json` file and renders nodes as red circles with blue text labels, while purple links vary in stroke width according to each connection’s weight. The graph uses the older `d3.layout.force` API to apply gravity, charge, and distance parameters that position the nodes. SVG is the rendering approach, with drag interactions enabled through the force layout’s drag method.

Nnagamaheswar

84% match