Skip to main content
SimilarExport ZIP
100%

Fork of Force Directed Graph

✓ Published0🌍 Public
Jjas0821
Last edited Feb 21, 2022
Created on Feb 21, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Force Directed Graph

This example pairs a force-directed node-link diagram with an adjacency matrix to visualize the same graph, letting users compare both representations. The node-link view uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to generate a network layout, where nodes are colored by group and are draggable via d3 drag. Clicking a node highlights its corresponding row and column links in the matrix, and vice versa; selecting a matrix cell highlights the matching network edge. The graph data comes from the infect-dublin edge list, and the visualization is built with reusable D3 v6 modules rendered in SVG.

Ssalwa191
95% match
Loading thumbnail…

Fork of Force Directed Graph

This example pairs a force-directed node-link diagram with an adjacency matrix to visualize the same graph, letting users compare both representations. The node-link view uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to generate a network layout, where nodes are colored by group and are draggable via d3 drag. Clicking a node highlights its corresponding row and column links in the matrix, and vice versa; selecting a matrix cell highlights the matching network edge. The graph data comes from the infect-dublin edge list, and the visualization is built with reusable D3 v6 modules rendered in SVG.

Ssalwa191
95% match
Loading thumbnail…

Fork of Force Directed Graph

This example pairs a force-directed node-link diagram with an adjacency matrix, both rendered in SVG using D3 v6. The force layout uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`, while nodes are colored by group and draggable. Clicking a node highlights its corresponding row and column in the matrix, and vice versa, using shared link IDs. The data comes from preprocessed edge lists with weighted values, and zooming is enabled via `d3.zoom`.

Mmalipieroproject
93% match
Loading thumbnail…

Fork of Force Directed Graph

This visualization pairs a force-directed node-link diagram with an adjacency matrix for a Dublin contact network. Using `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, it simulates node physics, while the matrix encodes link weights as cell opacity. Clicking a node or matrix cell highlights its row and column, and interactions support drag-and-drop and zoom via `d3.zoom` and custom drag handlers. Data comes from an edge list of weighted connections, rendered as SVG circles and lines.

Ssalwa191
93% match
Loading thumbnail…

Fork of Force Directed Graph

A fork of a force-directed graph links a node-link diagram with an adjacency matrix. The code uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes and links from the `infect-dublin.edges` dataset, rendered as SVG circles and lines. Clicking a node or matrix cell highlights its corresponding links and row/column with a distinct color, while `d3.zoom` and a custom `drag` function enable panning, scaling, and node repositioning. Colors map node groups via a predefined palette, and each matrix cell’s fill opacity reflects edge weight.

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

Fork of Force Directed Graph

The visualization pairs a node-link force-directed graph with an adjacency matrix view of the same network. The graph is computed using `d3.forceSimulation` with link, many-body, and center forces, while the matrix uses `rect` elements to encode edge weight via fill opacity. Clicking a node highlights its corresponding matrix row and column, and vice versa, with the selected cell emphasized in red. The implementation relies on the D3.js v6 API, including `d3.forceLink`, `d3.forceManyBody`, and custom drag and zoom interactions.

EELBOUNIAmine
92% 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
91% match