Skip to main content
SimilarExport ZIP
100%

A8-adjacency matrix

✓ Published0🌍 Public
Jjrcuster@dons.usfca.edu
Last edited Mar 21, 2025
Created on Mar 21, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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
92% match
Loading thumbnail…

A8-node-link diagram with force-directed layout

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.

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

D3 - Adjacency Matrix

This example visualizes a dolphin social network as an interactive adjacency matrix. It displays a grid of colored squares where each row and column represents a dolphin, with filled cells indicating connections between individuals. The visualization uses two versions of D3 (v6 and v7) to parse CSV data, construct the matrix from edge lists, and render SVG rectangles with hover effects that highlight entire rows and columns. A tooltip appears on mouseover to show the specific link identifier, while the matrix labels each axis with node IDs.

CChandana Srinivas
87% match
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
86% 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
82% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Heatmap in D3

This visualization displays the adjacency matrix of a dolphin social network, showing connections between individual dolphins as blue cells against a white background. It loads real network data from a GitHub Gist using `d3.text`, parses the edge list, and builds a symmetric matrix to reflect the undirected graph. The code uses core D3.js v7 methods like `d3.select`, `selectAll`, and `data().enter().append()` to render the SVG rectangles, with row groups positioned via `transform` attributes and cell fills determined by binary connection values. Tooltips are included but not bound to mouse events in the provided code.

Yyashaswisanjanaaerra@my.unt.edu
81% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Heatmap in D3

This visualization displays the adjacency matrix of a dolphin social network, showing connections between individual dolphins as blue cells against a white background. It loads real network data from a GitHub Gist using `d3.text`, parses the edge list, and builds a symmetric matrix to reflect the undirected graph. The code uses core D3.js v7 methods like `d3.select`, `selectAll`, and `data().enter().append()` to render the SVG rectangles, with row groups positioned via `transform` attributes and cell fills determined by binary connection values. Tooltips are included but not bound to mouse events in the provided code.

Yyashaswisanjanaaerra@my.unt.edu
81% match
Loading thumbnail…

Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, showing connections between individual dolphins as blue cells on a white grid. The code fetches network data from a GitHub Gist, parses it, and builds a symmetric matrix since the graph is undirected. Using D3 v7, it renders the matrix as SVG rectangles with a tooltip, mapping each cell to a row and column representing dolphin IDs. The visualization highlights the network’s structure at a glance, with each filled cell indicating a social tie between two dolphins.

Yyashaswisanjanaaerra@my.unt.edu
80% match