Skip to main content
SimilarExport ZIP
100%

A8-node-link diagram with force-directed layout

✓ Published2🌍 Public
Jjrcuster@dons.usfca.edu
Last edited Mar 24, 2025
Created on Mar 20, 2025
Forked from A7-4 Line Chart

This visualization shows a force-directed network of dolphin associations, with 62 nodes representing individual dolphins and links indicating their social connections based on affection data. The graph uses a static node-link diagram rendered in SVG, where each dolphin is a steelblue circle labeled with its ID. Built with d3.v7, it loads data from a CSV file and applies d3.forceSimulation with d3.forceLink, d3.forceManyBody, and d3.forceCenter to compute the layout. The nodes are draggable via d3.drag, with positions refreshed on each simulation tick.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Force Directed Node-Link Diagram

This force-directed node-link diagram visualizes a dolphin social network, showing relationships between individual dolphins as nodes connected by links. The graph uses D3's `forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` functions to position nodes based on network structure. Nodes appear as blue circles with hover tooltips displaying dolphin IDs, and users can drag nodes through D3's drag interaction. The data is loaded as CSV text from a GitHub gist, parsed into nodes and links, and rendered as SVG elements updated on each simulation tick.

Kkfhujosefsson@dons.usfca.edu
93% match
Loading thumbnail…

D3 - Nodelink - Force Directed Layout

This example shows a force-directed node-link diagram of dolphin social relationships, with each circle representing a dolphin and lines indicating connections. The visualization uses D3 v7 APIs including `d3.forceSimulation`, `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCenter` to compute the layout, while SVG circles and lines render the nodes and edges with animated positions on each tick. A hover tooltip, styled as a div element, displays the dolphin identifier. The data originates from a CSV file of dolphin interaction pairs loaded via `d3.csv`.

CChandana Srinivas
91% match
Loading thumbnail…

A8-adjacency matrix

This example visualizes a dolphin social network as an interactive force-directed graph. Nodes represent individual dolphins, and links show pairwise affections with thickness scaled by the strength of the relationship. The code loads dolphin interaction data from a raw CSV file hosted on GitHub using `d3.csv`, then applies a `d3.forceSimulation` with link, charge, and center forces to position the nodes within an SVG. Users can drag nodes via D3’s drag behavior, which temporarily fixes node positions during interaction.

Jjrcuster@dons.usfca.edu
89% match
Loading thumbnail…

A8-adjacency matrix

This visualization displays a dolphin interaction network as an adjacency matrix. Each cell represents the affection level between a pair of dolphins, with color intensity ranging from white to blue via a linear color scale indicating the strength of the connection. The code loads data from a CSV file, builds a symmetric matrix, and renders it using SVG rectangles within an HTML page. D3.js version 7 manages data binding, scales, and tooltips on mouseover, while row and column labels identify individual dolphins by their numeric IDs.

Jjrcuster@dons.usfca.edu
84% match
Loading thumbnail…

A8 - Node Link Diagram

This interactive force-directed network visualization displays 100 nodes and 300 weighted links with their distances. It uses D3.js v7's `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to simulate physics-based layouts, with draggable nodes via `d3.drag`. Nodes are rendered as SVG circles with tooltips, and links as lines whose opacity reflects connection strength.

Rronnieferrufino4908@gmail.com
82% match
Loading thumbnail…

A8 - Node-Link with Force Directed Layout

This visualization shows the Advogato social network’s 1,000-member connection structure as a node-link diagram, with gray lines representing edges and green circles for nodes. Using D3 v7’s `d3.forceSimulation`, it applies `forceManyBody` for repulsion, `forceLink` for edge spacing, and `forceCenter` for layout, updating positions via the simulation’s tick event. The SVG renders at 3500×2500 pixels, requiring zoom or scroll to view fully, and loads data from a CSV in the Network Data Repository.

AAndrew Blakeslee Moore
82% match
Loading thumbnail…

A8 - node-link diagram for another dataset

This example presents a node-link diagram of a large directed graph, using a force-directed layout to position nodes and edges. The visualization highlights the network’s structure, with orange circular nodes and gray links, and includes interactive tooltips that display node IDs on hover. The code relies on D3 v7’s `d3.forceSimulation`, `d3.forceManyBody`, and `d3.forceLink` to compute the layout, while rendering via SVG elements (`circle` and `line`). Data is loaded as CSV from a GitHub gist, with edges defined by source and target node columns.

DDuc Pham
82% match
Loading thumbnail…

D3 Node-Link Diagram

This example shows a node-link diagram of social network data, using a force-directed layout to position 16 nodes and their connecting links. The visualization uses D3 v7's `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to calculate the layout, while rendering nodes as SVG circles and edges as lines with animated tick updates. Node colors come from `d3.scaleOrdinal` with the `schemeSet1` palette, and hovering a node triggers a tooltip via mouseover events. Data is loaded from a CSV file containing source, target, and link values.

Mmariahdiaz
81% match