Skip to main content
SimilarExport ZIP
100%

doing

✓ Published0🌍 Public
LLigoon
Last edited Nov 6, 2020
Created on Nov 6, 2020

A force-directed network graph and an adjacency matrix display the same node-link dataset side-by-side. The network view uses `d3.forceSimulation` with forceLink, forceManyBody, and forceCenter to position nodes, which are rendered as SVG circles colored by group and support dragging, zooming, and tooltip interactions. The matrix view encodes links as gray cells in the upper and lower triangles, with group-colored axis bands; a brush filter on the top axis selects nodes to update the matrix. Both views read from external nodes and edges files, with the matrix using `d3.scaleBand` for axis positioning.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Force Directed Graph

This example combines a force-directed node-link diagram with an adjacency matrix to visualize the same graph data in two coordinated views. Clicking a node in the left network highlights its corresponding row and column in the matrix, and vice versa. The layout is built with d3.forceSimulation, d3.forceLink, and d3.forceCenter, while the matrix cells are rendered as SVG rects with opacity encoding edge weight. Both views support zooming and dragging via d3.zoom and d3.drag.

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

Force Directed Graph

A force-directed graph and adjacency matrix display network data side-by-side. The graph shows nodes as colored circles connected by links, while the matrix uses cells with opacity representing edge weights. Clicking a node or matrix cell highlights the corresponding row and column in both views. The visualization uses d3.forceSimulation for layout, drag interactions, and zoom, with SVG rendering for all elements.

Wwinniepooh520
87% match
Loading thumbnail…

Force Directed Graph

This example pairs an interactive force-directed node-link diagram with an adjacency matrix, showing the same network data in two complementary views. Users can drag nodes in the graph to reposition them, click a node to highlight corresponding row/column links, or click matrix cells to highlight edges. The force layout uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, while the matrix is rendered as SVG rectangles. Both views are synchronised via click events, with zoom support provided by a custom `d3.zoom` handler.

Ppychen01
87% match
Loading thumbnail…

Force Directed Graph

This example presents a node-link force-directed graph alongside an adjacency matrix, allowing comparison between the two visual representations. The graph uses d3.forceSimulation, d3.forceLink, and d3.forceManyBody to position nodes and links, while the matrix renders weighted connections as SVG rectangles. Clicking a node or matrix cell highlights corresponding rows, columns, and links in red, with the graph supporting drag-and-drop and zooming via d3.drag and d3.zoom.

Ppeter6179
87% match
Loading thumbnail…

Force Directed Graph

A force-directed graph of 410 connected nodes is shown alongside an adjacency matrix, letting users explore network structure through either view. Clicking a node in the graph highlights its row and column in the matrix, while clicking a matrix cell highlights the corresponding link. The layout uses d3.forceSimulation with forceLink and forceManyBody, rendered as SVG circles and lines, with a zoom transform applied to both. The adjacency matrix is built from the same edge data, and hover effects use dynamically updated stroke colors and widths.

Aa04775
87% match
Loading thumbnail…

Force Directed Graph

The visualization shows a force-directed graph alongside an adjacent linked adjacency matrix, allowing users to explore connections between nodes in a network and compare the node-link diagram with a matrix representation. Clicking a node in the graph highlights its corresponding row and column in the matrix, while clicking a matrix cell highlights the related link and updates a text label describing the relationship status. Built with d3.v6, it uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to compute node positions, plus SVG circles and lines for rendering. Data is loaded via CSV, and interaction includes dragging and zooming.

Wwinniepooh520
86% match
Loading thumbnail…

Force Directed Graph

This example presents a force-directed graph of nodes and links alongside an adjacency matrix, demonstrating an interactive comparison between the two visual representations of the same network data. Clicking a node in the graph highlights its corresponding row and column in the matrix, while clicking a matrix cell highlights the linked nodes in the graph. Built with D3 v6 and rendered as SVG, the visualization uses `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` for layout, with drag and zoom interactions enabled via `d3.drag` and `d3.zoom`.

Ppychen01
86% match