Adjacency Matrix

100%

Adjacency Matrix

✓ Published5🌍 Public

Last edited Jul 16, 2021

Created on Nov 19, 2020

This example visualizes a network of 410 nodes and their connections as a symmetric adjacency matrix, using the infect-dublin edge dataset. The matrix cells are rendered as SVG rectangles, with rows and columns colored by node group. Users can brush along the top axis to filter the matrix; a selection triggers animated transitions that re-scale the axes and reposition the corresponding cells. Built with D3.js v4, it relies on `d3.scaleBand`, `d3.brushX`, and `transition.attr` to update the visualization.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Adjacency Matrix

This adjacency matrix visualization displays network connectivity among 410 nodes, with rows and columns representing individual nodes and gray cells marking their connections. The matrix uses a dataset of edges from an infect-Dublin network file. Built with D3.js v4, it renders SVG rectangles for matrix cells and axis labels, with node colors indicating group membership. Users can brush along the top axis to select a subset of nodes, triggering smooth transitions that re-scale the matrix and axes to focus on the selected region.

Kketchuparegood

94% match

Loading thumbnail…

Adjacency Matrix

This adjacency matrix displays a network of 410 nodes from the infect-dublin.edges dataset, showing connections as grey cells that appear in both the upper and lower triangles since links are rendered symmetrically. The matrix uses color-coded axis rectangles to represent node groups, with an interactive brushing feature that allows selection of a range on the X-axis. Upon selection, the matrix animates via `transition()` to filter and re-scale the display, recomputing the axis domain and cell dimensions to focus on the chosen subset. Built with d3.v4, the visualization renders as SVG and uses `d3.scaleBand`, `d3.brushX`, and chained `.attr()` calls for layout and interaction.

Ppychen01

94% match

Loading thumbnail…

Matrix

This matrix visualization displays the adjacency relationships between 410 nodes from the infect-dublin network dataset. The code uses D3.js to render an SVG adjacency matrix where colored rectangles along the top and left edges represent node groups, and gray cells indicate connections. A brush interaction allows selecting a range of nodes, triggering a smooth transition that reorders the matrix to focus on the selected subset, with axis labels appearing when the selection is small enough.

Xx112358

92% match

Loading thumbnail…

Adjacency Matrix

This visualization displays an adjacency matrix of a network with 410 nodes, using colored rectangles along the x- and y-axes to represent node groups. The matrix cells, rendered as gray squares in both upper and lower triangles, indicate connections between nodes. Built with D3 v4, it uses SVG and animated transitions to resize and reposition matrix elements. A brush interaction on the top axis allows users to select a subset of nodes, triggering a smooth re-scaling of the matrix and axis labels to focus on the selected range.

Ppychen01

89% match

Loading thumbnail…

node-link diagram and adjacency matrix

This example presents a node-link diagram of the infect-dublin network alongside an adjacency matrix, with nodes colored by degree. Users can reorder the matrix by node name or degree via a dropdown. The network is rendered using `d3.forceSimulation` with link, charge, and center forces, while the matrix is drawn as SVG rectangles. The code uses D3 v4 and parses the edge list from the `infect-dublin.edges` file.

Ddrean205287

83% match

Loading thumbnail…

adjacency matrix

This adjacency matrix visualization uses a grid of colored cells to show connections between individuals in a social network, with darker orange cells indicating stronger relationships. The code loads node and edge data from CSV files, then constructs a matrix where each row and column represents a person, and cell opacity reflects edge weights. Built with D3.js v4, it renders SVG rectangles for the matrix cells, labels axes with node names, and highlights rows and columns on mouseover. The example uses D3’s selection, data binding, and event handling APIs to create an interactive overview of pairwise relationships.

663anp3ca

82% match

Loading thumbnail…

Adjacency Matrix

This example visualizes the adjacency relationships in a network as a matrix, where rows and columns correspond to nodes and colored cells indicate the presence of a link. The code uses D3.js v6 to load CSV data from a GitHub gist, constructs a square grid of rectangles sized 17x17 pixels, and encodes edge weights via fill opacity. Interactive mouseover events highlight the entire row and column of a hovered cell and display a tooltip with the link ID. Node labels are rendered as text along both axes.

PPranay Matalia

82% match

Loading thumbnail…

Adjacency Matrix

This example visualizes a network of high-tech firms as an adjacency matrix, where each row and column represents a node and colored cells indicate directed connections between them. Built with D3 v6, the code loads CSV data, constructs the matrix, and renders it as SVG rectangles with hover tooltips. Node labels appear on the top and left axes, using the classic matrix layout for compact network representation.

AAllen Ho

82% match