Force Directed Graph

100%

Force Directed Graph

✓ Published0🌍 Public

Last edited Nov 7, 2020

Created on Nov 7, 2020

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Force Directed Graph

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.

Hhenry8966

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 combines a force-directed graph with an adjacency matrix to visualize network data. The code reads a small dataset of nodes and links, rendering the graph as SVG circles and lines using `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`. Users can drag nodes and apply zoom via `d3.zoom`. Clicking a node highlights its corresponding row and column in the adjacency matrix, which is built with D3 selections and `rect` elements. The visualization uses a color scale for node groups and includes a dropdown to order matrix rows.

Yyptang5488

90% match

Loading thumbnail…

Fork of Force Directed Graph

This example presents a node-link force-directed graph alongside its adjacency matrix representation, allowing users to explore connections between nodes. The graph uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while the matrix encodes edge weights as cell opacity. Clicking a node highlights its corresponding rows and columns in the matrix, and clicking matrix cells highlights the matching graph link. The implementation relies on d3.v6 with SVG rendering, and includes zoom and drag interactions. The data appears to come from a Dublin infection network, with nodes colored by group classification.

Ssalwa191

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

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

89% match

Loading thumbnail…

Fork of Force Directed Graph

This example pairs an interactive force-directed node-link diagram with an adjacency matrix view of the same network data. Dragging nodes in the force simulation or clicking matrix cells highlights corresponding rows, columns, and links in both views. The code uses `d3.forceSimulation` with `forceLink` and `forceManyBody`, and renders as SVG with zoom support. The matrix cells encode link weights through fill opacity, while the node-link view reads edge data from the `infect-dublin.edges` dataset.

Jjas0821

89% match

Loading thumbnail…

Fork of Force Directed Graph

A force-directed graph of a Dublin infection network, rendered as SVG with D3.js, is paired with an adjacency matrix to compare the two representations. Clicking a node highlights its corresponding row and column in the matrix, while clicking a matrix cell highlights its link in the graph. The visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`, supports zooming via `d3.zoom`, and applies node colors by group. The dataset comes from `infect-dublin.edges` and includes edge weights affecting link stroke width.

Ssalwa191

89% match