Force Directed Graph

100%

Force Directed Graph

✓ Published0🌍 Public

Last edited Nov 9, 2020

Created on Nov 9, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

93% match

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

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

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

90% match

Loading thumbnail…

Force Directed Graph

This example pairs a force-directed node-link diagram with an adjacency matrix to explore network structure. The graph layout is computed using `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` forces, and users can drag nodes or zoom via `d3.zoom`. Clicking a node highlights its corresponding row and column in the matrix, and clicking a matrix cell highlights the linked edge. Node colors encode group membership, while edge thickness reflects link weight.

Wwinniepooh520

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

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

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

89% match