import reorder.js

100%

import reorder.js

✓ Published0🌍 Public

Last edited Nov 24, 2020

Created on Oct 2, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

import reorder.js

This example demonstrates how the `reorder.js` library's `barycenter_order` algorithm reorders the rows and columns of an adjacency matrix to reveal clustered structure in a network. It first converts a small binary matrix into a graph via `mat2graph`, then applies the permutation to the transposed matrix. The code also loads edge-list data from `infect-dublin.edges`, suggesting the technique scales to real-world network datasets.

XXinYaoHuang

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

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

80% match

Loading thumbnail…

Matrix

This example presents two coordinated views of the same graph data: a force-directed node-link diagram rendered with d3.forceSimulation, and an adjacency matrix using reorder.js for layout. Clicking a node in the network highlights the corresponding row and column in the matrix, while clicking a matrix cell highlights its associated link. The matrix uses SVG rectangles with fill-opacity representing connection strength, and both views support zooming and dragging. The code imports d3 v6, d3-force, and reorder.js libraries.

Aannie520143

77% match

Loading thumbnail…

node-link diagrams vs. adjacency matrix

This example compares node-link diagrams with adjacency matrices by displaying an interactive heatmap of a network. Users can reorder the matrix rows and columns using buttons that trigger random permutations, restore the initial ordering, or apply an optimal leaf order algorithm to cluster related nodes. The visualization is built with D3 v6, using SVG for rendering and transitions to animate the reordering process, while the reorder.js library handles permutation calculations.

Nnomiaro

76% match

Loading thumbnail…

test

This example shows an adjacency matrix of 410 nodes, with cells colored by group and sized by link frequency. A dropdown menu reorders the matrix by name, group, or optimal leaf order, with animated transitions. The visualization uses d3.scaleBand, d3.scaleOrdinal, and reorder.optimal_leaf_order with Manhattan distance. Cells are rendered as SVG rects with hover tooltips, and the data comes from a TSV file loaded via d3.tsv.

Iimsohandsome123

76% match

Loading thumbnail…

Heatmap

This heatmap visualization reorders rows and columns of a binary matrix using the `reorder.v1.js` library. The matrix cells are rendered as SVG rectangles, with fill color intensity mapped through a D3 linear scale. Buttons trigger algorithms like optimal leaf ordering and random permutation, with a D3 transition smoothly animating the reordering over 1.5 seconds. The `table.js` script sets up the grid and labels, while the `science.v1.js` library provides supporting statistical functions.

WWei-Che Chang

74% match

Loading thumbnail…

ADMatrix

This visualization combines a force-directed graph with a reorderable adjacency matrix, allowing users to explore network connectivity through two linked views. The graph uses d3.forceSimulation to position nodes, while the matrix encodes links as colored cells, with the optimal_leaf_order algorithm from reorder.js arranging the rows and columns. Clicking a node or matrix cell highlights the corresponding row and column in red, and the graph supports zoom and drag interactions. The data appears to be network links and nodes rendered as SVG elements.

Iimsohandsome123

73% match