Force Directed Graph

100%

Force Directed Graph

✓ Published0🌍 Public

Last edited Nov 6, 2020

Created on Nov 6, 2020

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`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Force Directed Graph

This example pairs a force-directed network graph with an interactive adjacency matrix to explore node relationships. Users can drag, zoom, and click nodes in the graph or click cells in the matrix to highlight corresponding links in both views. The graph is rendered in SVG using D3’s `forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` APIs, with nodes colored by group and links weighted by connection value. The adjacency matrix encodes edge weights via cell opacity, built from the same edge data as the network.

Cchungmin-yu

95% match

Loading thumbnail…

Force Directed Graph

This example pairs a force-directed graph with an adjacency matrix to explore node-link diagrams and network connectivity. The graph uses D3’s `d3.forceSimulation` and `d3.forceLink` to position nodes, while the matrix encodes edge weights as cell opacity. Clicking a node or matrix cell highlights the corresponding row, column, and connected links. The code also enables drag interactions via `d3.drag` and zooming with `d3.zoom`, rendering everything as SVG.

Yyixinxu2020

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

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

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

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

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

92% match

Loading thumbnail…

Force Directed Graph

This example pairs a force-directed graph with an adjacency matrix to explore node-link relationships. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while drag and zoom interactions are enabled. Clicking a node or matrix cell highlights its row and column in the matrix and emphasizes connected links. Data is loaded from a CSV edges file, and rendering uses SVG circles, lines, and rectangles.

Wwinniepooh520

92% match