A8-adjacency matrix

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

92% match

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

90% match

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.

Fork of Fork of Fork of Fork of Heatmap in D3

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.

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

Fork of Fork of Fork of Fork of Fork of Heatmap in D3

This adjacency matrix visualizes the social network of dolphins, with rows and columns representing individual animals. Blue cells indicate a social connection between two dolphins, while white cells represent no direct link. The code uses the D3.js library, fetching edge-list data from a GitHub Gist and rendering it as an SVG heatmap. User interaction includes a tooltip, though the matrix itself is static, with cell size computed based on the number of nodes.

83% match

Fork of Fork of Fork of Fork of Fork of Heatmap in D3