test

100%

✓ Published0🌍 Public

Last edited Nov 25, 2020

Created on Nov 25, 2020

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

82% match

Loading thumbnail…

test

Interactive force-directed network visualizes 410 nodes connected by 189 links derived from a TSV dataset, with node groups assigned by link-count thresholds. Users can drag nodes and reorder the adjacency matrix by name, group, or leaf-order optimization using the `reorder` library. The SVG rendering combines `d3.forceSimulation` for layout with color-coded nodes from `d3.schemeCategory10`, while the adjustable ordering reveals clustering patterns through matrix reconfiguration.

CChenLeah

81% match

Loading thumbnail…

Matrix Diagram

This matrix diagram displays the relationships between 49 nodes, with colored cells indicating connection strength. The visualization uses d3.scaleBand for positioning, d3.scaleOrdinal with schemeCategory10 for coloring, and d3.scaleLinear for opacity. The SVG rendering includes interactive sorting by name, count, or group, with animated transitions using transition.attr and delayed updates. Hovering highlights corresponding row and column labels. Data comes from a JSON structure containing links with numeric values, rendered as a symmetric matrix where cell opacity encodes edge weight.

Hhenry1987

80% match

Loading thumbnail…

test

This example combines a force-directed node-link diagram with an adjacency matrix visualization, allowing interactive exploration of network connectivity. Clicking a node in the diagram highlights its corresponding row and column in the matrix, while clicking a matrix cell reports the presence or absence of a link between the two nodes. The code uses d3.forceSimulation for layout, d3.zoom for panning and scaling, and SVG circles and rectangles for rendering. Data appears to be loaded from an external CSV or TSV source, and the interface supports dragging nodes and dynamically updating matrix highlights in response to selections.

TTimmyLu

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

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

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

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

76% match