Matrix Graph

100%

✓ Published0🌍 Public

Last edited Mar 3, 2018

Created on Mar 3, 2018

This matrix graph visualizes a network of 200 nodes and over 500 edges as a symmetric adjacency matrix. Each row and column represents a node, and a colored square marks the presence of an edge, with the plot mirrored along the diagonal to show both directions of each connection. The visualization is built with the p5.js library, loading edge data from a CSV file and sorting unique node IDs to calculate grid positions. Hovering over a square highlights it and reveals the corresponding node labels along the axes, and the code also draws the transpose position for each edge.

AI-generated description

Similar vizzes

Loading thumbnail…

Node-Link Graph

A force-directed node-link graph visualizes a network of 200 nodes and over 400 undirected edges derived from a CSV file. The p5.js sketch implements a custom layout simulation, iteratively calculating repulsive forces between all node pairs and attractive forces along edges to position vertices. Nodes are rendered as purple ellipses, edges as black lines, and hovering over a node highlights its adjacent edges in cyan while displaying the node ID. The code uses p5.js functions like `loadTable`, `dist`, and `ellipse` to handle data loading, interaction, and drawing.

SShayRomayo

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

76% match

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

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

75% match

Loading thumbnail…

A8 - Adjacency Matrix

This adjacency matrix visualizes a network of 100 nodes using a grid where blue cells indicate connections between source and target nodes. Built with D3.js v7, the code loads edge data from a CSV file and uses a Map with Set collections to store connection pairs. Each cell is rendered as an SVG rectangle, with fill color determined by whether a connection exists between the corresponding row and column nodes. Row and column labels are added as rotated text elements, with nodes sorted by ID for consistent layout.

Rronnieferrufino4908@gmail.com

75% match

Loading thumbnail…

Adjacency Matrix

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.

Sshialian

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

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

74% match