Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Map

✓ Published0🌍 Public
Ccsesomarajuaswini@gmail.com
Last edited Apr 9, 2026
Created on Apr 9, 2026
Forked from Fork of Map

A force-directed graph represents a student collaboration network, with six tomato-colored nodes for students and gray links for their connections. Built with d3.v7, it uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` forces to position nodes. The SVG rendering updates node and label positions on each simulation tick. Users can drag nodes, which adjusts the simulation's alpha target to pause or restart the layout.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of HTML Starter

A force-directed network diagram visualizes relationships between arts and community organizations. Nodes are color-coded by parent category and sized by hierarchy level. The D3 v7 simulation applies many-body forces, distance-based link springs, and a centering force. The code uses `forceSimulation`, `forceManyBody`, `forceLink`, `forceCenter`, and `drag` APIs to create an interactive, draggable SVG graph.

Ddragan.gorgiev@gmail.com
85% match
Loading thumbnail…

Fork of Force Directed Graph Starter

This fork of the D3 Force Directed Graph Starter displays a small network of three named nodes and two links, rendered as gray circles, text labels, and black lines in an SVG. The visualization uses d3.forceSimulation with d3.forceManyBody, d3.forceLink, and d3.forceCenter to compute the layout, moving nodes based on the data from data.js. The simulation’s 'tick' event updates the circles, texts, and lines positions dynamically. D3 v6 is loaded via a CDN, and the graph is presented in a 960x500 SVG container.

NNikita Toropov
84% match
Loading thumbnail…

Fork of network map

A compact food-and-category network uses D3 v7's `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position six colored nodes (three categories in pink, three foods in green) connected by five gray links. The force-directed layout runs on an SVG canvas, with draggable circles via `d3.drag` and text labels updated on each simulation tick. The data is a hardcoded set of nodes and links, illustrating simple relationships between items and their categories.

Ssravya7136@gmail.com
84% match
Loading thumbnail…

Fork of Force Directed Graph

A fork of a force-directed graph compares node-link and adjacency-matrix views of a network. Clicking a node in the graph, or a cell in the matrix, highlights the corresponding row and column or links. The graph uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter, while the matrix renders as SVG rectangles scaled by edge weight. Both views support zooming and dragging via d3.drag and d3.zoom, with node colors mapping to group values.

EELBOUNIAmine
84% match
Loading thumbnail…

Fork of D3 Starter-2b

This network graph uses D3.js (v7) to visualize six named nodes and their connections as a force-directed layout. The example combines `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute positions, rendered as SVG circles, lines, and text labels. Nodes are draggable via the `d3.drag` API, allowing manual repositioning that influences the simulation. The graph is generated from a static dataset defined in the JavaScript code, with default styling applied via CSS.

Aaddalalikitha15@gmail.com
83% match
Loading thumbnail…

Fork of Force Directed Graph

This visualization pairs a force-directed graph with an adjacency matrix of the same network, using d3.forceSimulation, d3.forceLink, and d3.drag to lay out and interact with nodes. Clicking a node highlights its corresponding row and column in the matrix, while the graph’s links are drawn as semi-transparent lines with widths proportional to edge value. The code loads edge data from a CSV file and maps node groups to a fixed color palette, with both views rendered as SVG.

Ssalwa191
83% match
Loading thumbnail…

Fork of Force Directed Graph

This example pairs a force-directed node-link diagram with an adjacency matrix, both rendered in SVG using D3 v6. The force layout uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`, while nodes are colored by group and draggable. Clicking a node highlights its corresponding row and column in the matrix, and vice versa, using shared link IDs. The data comes from preprocessed edge lists with weighted values, and zooming is enabled via `d3.zoom`.

Mmalipieroproject
83% match
Loading thumbnail…

Fork of Fork of D3 Starter

This interactive network graph visualizes a small set of six individuals (Alice through Frank) connected by six social links. Using D3 v7’s force simulation (`d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`), the nodes and links are rendered as SVG circles, lines, and text labels. The simulation automatically positions the network, while drag behavior (`d3.drag`) lets users move individual nodes in real time, with the layout updating on each tick event.

Kkmuddana@gitam.in
83% match