Skip to main content
SimilarExport ZIP
100%

Matrix

✓ Published4🌍 Public
Aannie520143
Last edited Nov 9, 2020
Created on Nov 8, 2020
Forked from React Starter

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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
93% match
Loading thumbnail…

Matrix

This example combines a force-directed node-link diagram with an adjacency matrix visualization of the same dataset. Clicking a node in the force diagram highlights its corresponding row and column in the matrix, while clicking a matrix cell identifies a specific connection. The code uses `d3.forceSimulation`, `forceLink`, and `forceManyBody` for the graph layout, and renders both views as SVG with `d3.drag` for interaction and `d3.zoom` for panning and scaling.

Aannie520143
91% 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
91% 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
87% match
Loading thumbnail…

Force Directed Graph

This example combines a force-directed graph with an adjacency matrix to visualize network connections. Users can click a node in the graph or a grid cell in the matrix to highlight corresponding links, with the matrix using cell opacity to represent edge weight. The graph is rendered with SVG elements driven by `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, while the matrix is built from `d3.csv` data. Interactive features include drag-and-drop via `d3.drag` and zooming through `d3.zoom`.

Cchungmin-yu
86% match
Loading thumbnail…

111

This example pairs a force-directed graph with an adjacency matrix to visualize network relationships. Clicking a node in the graph highlights its corresponding row and column in the matrix, while clicking a matrix cell identifies the linked nodes or notes the absence of a link. The graph uses d3.forceSimulation with forceLink and forceManyBody for layout, and the matrix applies fill opacity based on edge weight. Both views support zooming via d3.zoom and dragging via d3.drag, with data rendered as SVG elements.

Aannie520143
85% 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
85% match
Loading thumbnail…

Force Directed Graph

This example pairs a force-directed graph with an adjacency matrix to explore node-link diagrams and network connectivity. The graph uses D3’s `d3.forceSimulation` and `d3.forceLink` to position nodes, while the matrix encodes edge weights as cell opacity. Clicking a node or matrix cell highlights the corresponding row, column, and connected links. The code also enables drag interactions via `d3.drag` and zooming with `d3.zoom`, rendering everything as SVG.

Yyixinxu2020
85% match