Skip to main content
SimilarExport ZIP
100%

Force Directed Graph

✓ Published2🌍 Public
Hhenry8966
Last edited Nov 24, 2020
Created on Nov 7, 2020

This visualization pairs a force-directed graph with an adjacency matrix to explore network structure. Clicking a node in the graph or a cell in the matrix highlights the corresponding node and its edges in red. The graph uses `d3.forceSimulation` with link, charge, and center forces, supports dragging and zooming, and the matrix can be reordered by name, degree, or an optimal leaf ordering from the `reorder.js` library. Both views render to SVG, using data from the infect-dublin.edges file.

AI-generated description
MIT Licensed

Similar vizzes

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

Force Directed Graph

A force-directed graph and an adjacency matrix side-by-side show the connections within a network dataset. Selecting a node by clicking its square in the matrix highlights that node and its incident edges in red. The graph is rendered with SVG and uses `d3.forceSimulation` for layout, with drag and zoom interactions. The matrix order can be toggled between name and degree, using `d3.zoom` and custom mouse events.

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

Force Directed Graph

This example visualizes a force-directed graph alongside an adjacency matrix, using the infect-dublin dataset. Users can click nodes in the graph or cells in the matrix to highlight connected links and corresponding rows or columns. The graph is rendered with SVG circles and lines, positioned via `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`. The matrix uses SVG rectangles with fill opacity representing link weights, and both views support zooming through `d3.zoom` and interactive dragging.

LLigoon
90% 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
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

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

Force Directed Graph

This visualization combines a force-directed node-link diagram with an adjacency matrix to show the connections and community structure in a social network. The node-link diagram uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, which can be dragged and zoomed. Clicking a node or a matrix cell highlights the corresponding row and column in the matrix and the connected links in the graph. The adjacency matrix uses custom `rect` elements to represent edge weights, with colors mapping to node groups.

JJasonYeong0821
89% match