Adjacency Matrix

100%

Adjacency Matrix

✓ Published1🌍 Public

Last edited Nov 23, 2020

Created on Nov 23, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

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

79% match

Loading thumbnail…

Untitled

This visualization displays a reordered adjacency matrix of social network data from the infect-dublin.edges file. The square grid encodes graph edges as colored cells, with node degree categorized into five groups via colors. Users can click cells to select edges, which are highlighted in red. The code uses d3.csv to load the data and reorder.js functions like `mat2graph`, `barycenter_order`, and `permute` to optimize node ordering, then renders the matrix with SVG rectangles.

XXinYaoHuang

79% match

Loading thumbnail…

Fork of Adjacency Matrix Using D3

This example presents a static adjacency matrix of a small, 20-node social network derived from the Network Repository’s high-tech firm dataset. The visualization uses a grid of colored rectangles, where cell color encodes edge weight (light gray for zero, yellow for low, orange for medium, and red for high values). The visualization is built using d3.scaleBand for axis positioning, d3.select for SVG rendering, and d3.csv to load the edge data. The code includes an interactive tooltip that appears on mouseover, showing the source, target, and value of each edge. The rendering uses an SVG canvas with row and column labels, and the tooltip is implemented using D3 transitions for opacity changes.

HHaili0109

78% match