D3 - Adjacency Matrix

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

90% 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

87% 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

86% 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

86% 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

86% match

Loading thumbnail…

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.

Yyashaswisanjanaaerra@my.unt.edu

85% match

Loading thumbnail…

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.

Yyashaswisanjanaaerra@my.unt.edu

85% match

Loading thumbnail…

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.

Yyashaswisanjanaaerra@my.unt.edu

85% match