111

100%

✓ Published0🌍 Public

Last edited Nov 8, 2020

Created on Nov 8, 2020

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

87% match

Loading thumbnail…

Force Directed Graph

This interactive visualization pairs a force-directed graph with an adjacency matrix, allowing users to explore relationships between nodes in a network. Clicking a node in the graph highlights its row and column in the matrix, while clicking a matrix cell highlights the corresponding link. Built with D3 v6, the graph uses `forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, with drag and zoom interactions enabled. The adjacency matrix is rendered as SVG rectangles, with fill opacity representing edge weights. Data comes from a custom edge list file, and node colors correspond to categorical groups.

Wwinniepooh520

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

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

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

86% match

Loading thumbnail…

Force Directed Graph

This visualization pairs a force-directed graph with an interactive adjacency matrix to show node connections and hub activity. The left panel renders 410 nodes and 1,342 edges as a SVG graph, while the right panel displays the matrix, colored by connection weight. Users can click a node or matrix cell to highlight corresponding links and rows in both views. The graph uses `d3.forceSimulation` with `forceLink` and `forceManyBody` for layout, and the matrix applies `fill-opacity` based on data values. Panning and zooming are handled through D3’s zoom behavior.

WWei-Che Chang

86% match