Skip to main content
SimilarExport ZIP
100%

111

✓ Published1🌍 Public
Aannie520143
Last edited Nov 9, 2020
Created on Nov 8, 2020
Forked from Hello VizHub

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

111

This example combines a force-directed graph with an adjacency matrix to explore network connections. Users can click nodes in the graph or cells in the matrix to highlight corresponding links in red. The visualization uses d3.forceSimulation for the graph layout and d3.zoom for panning and scaling. Data is rendered as SVG elements, with matrix cells colored by link weight.

Wwinniepooh520
91% match
Loading thumbnail…

Force Directed Graph

This example pairs a force-directed node-link diagram with an adjacency matrix to visualize network connections. The node-link view uses D3’s `forceSimulation`, `forceLink`, and `forceManyBody` to position nodes, while the matrix encodes edge weights as cell opacity. Clicking a node highlights its corresponding row and column in the matrix, and clicking a matrix cell highlights the matching link in the diagram. SVG rendering supports interactive dragging and zooming via D3’s `drag` and `zoom` behaviors.

Wwinniepooh520
91% match
Loading thumbnail…

Force Directed Graph

This example pairs a force-directed graph with an adjacency matrix. Users can click a node in the graph or a cell in the matrix to highlight all corresponding links, with the graph rendered as an SVG. The layout is computed using `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`, while the matrix cells are drawn as SVG rects with fill opacity reflecting edge weight. Both views support zoom and pan, and the graph nodes are draggable via d3-drag.

Wwinniepooh520
91% 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
90% match
Loading thumbnail…

Force Directed Graph

This example pairs a force-directed graph with an interactive adjacency matrix. The graph uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to layout nodes, and supports dragging. Clicking a matrix cell highlights the corresponding graph link, while the matrix also shows the dataset’s structure from the infect-dublin.edges file. The code uses d3.csv, d3.select, and reorder.js utilities for matrix permutation.

JJasonYeong0821
90% 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
90% 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
89% 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
89% match