Skip to main content
SimilarExport ZIP
100%

IRIS

✓ Published5🌍 Public
Gggh93234999
Last edited Nov 6, 2020
Created on Sep 29, 2020
Forked from HTML Starter

This visualization simultaneously displays a network graph and its adjacency matrix for a dataset of 410 nodes and their connections. The matrix on the left shows node connections as black squares, while the force-directed graph on the right uses d3.forceSimulation to position nodes, with colors indicating degree-based classifications. The graph supports zooming and dragging, and clicking on matrix cells or graph nodes logs their identifiers to the console.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of IRISis

This visualization shows a graph of connections between numbered nodes, derived from a dataset of edges, alongside a matrix display of the same adjacency information. The code uses D3 v5 with `d3.forceSimulation` for the force-directed layout, rendering nodes as circles and links as lines in an SVG. Additionally, it displays a matrix of clickable squares where colors indicate linked or unlinked pairs, with node colors assigned by degree ranges. The implementation reads data from a tab-separated file and includes zoom interaction via a translation and scale transform.

EELBOUNIAmine
88% match
Loading thumbnail…

Fork of IRIS

A graph visualization shows the connections between a dataset of node pairs, with a grid-based adjacency matrix on the left and a force-directed network on the right. The code uses `d3.forceSimulation` with `forceLink` and `forceManyBody` to position nodes, while rectangles are colored by edge presence and circles are colored by degree. The visualization supports zooming and panning, with node colors assigned based on degree quantiles.

Ssalwa191
86% match
Loading thumbnail…

Fork of IRIS

This visualization displays a network graph of nodes and links derived from a tab-separated dataset, rendered as an interactive SVG. The code builds an adjacency matrix and visualizes it as a grid of colored rectangles, while a separate force-directed layout using `d3.forceSimulation` positions the nodes and links. Nodes are colored based on their degree, and both the matrix cells and graph nodes respond to click events, though the click handlers only log to the console. The visualization also supports zooming and panning via a zoom behavior.

EELBOUNIAmine
86% 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
78% 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
78% match
Loading thumbnail…

Matrix

A force-directed node-link diagram and adjacency matrix display the same network data, linked by interactive selection. Clicking a node highlights its corresponding row and column in the matrix. The code uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` from d3-force for the layout, and `d3.select`, `d3.zoom`, and `d3.drag` for interaction. Nodes are sized by group, and the matrix uses precomputed edge hashes to determine cell connections.

Aannie520143
77% match
Loading thumbnail…

Matrix

This example combines a force-directed graph with an adjacency matrix to visualize network connections. Dragging nodes repositions the graph via `d3.forceSimulation`, while clicking either a node or a matrix cell highlights the corresponding row and column in red. The matrix uses SVG rectangles with opacity proportional to connection strength, and the view supports zooming through `d3.zoom`. The code loads data from TSV/CSV files and uses D3 v6 within a React starter, rendering both views synchronously.

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