Untitled

100%

✓ Published0🌍 Public

Last edited Nov 25, 2020

Created on Nov 24, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

81% match

Loading thumbnail…

import reorder.js

This visualization demonstrates matrix reordering to reveal clusters in network connectivity data. It loads a TSV file from GitHub, converts the edge list into an adjacency matrix, and applies the barycenter heuristic from the reorder.js library to permute rows and columns, grouping connected nodes. D3.js fetches the data and constructs the matrix, while the reorder.js functions `mat2graph`, `barycenter_order`, `permute`, and `transpose` handle the optimization. The resulting grid displays ones for existing links, with reordering making dense connection patterns visually apparent.

Mmagua

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

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

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

79% match

Loading thumbnail…

Optimal Order of Adjacency Matrix Visualization

This visualization presents a network as an adjacency matrix, where rows and columns represent nodes and colored cells indicate connections between them. The matrix can be reordered by selecting an option—Name, Group, or leafOrder—to reveal different structural patterns in the data. The visualization uses D3.js (v6) with SVG rendering and animation, leveraging the `reorder` library's optimal leaf ordering algorithm with Manhattan distance to compute an improved node sequence. The underlying dataset is loaded from a TSV file containing network edges, and node groups are derived from link counts.

Yyptang5488

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

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

77% match