Skip to main content
SimilarExport ZIP
100%

test

✓ Published0🌍 Public
Wwinniepooh520
Last edited Nov 8, 2020
Created on Nov 8, 2020
Forked from test

This example shows a force-directed node-link diagram and its corresponding adjacency matrix side by side, using the same underlying dataset. The force simulation (`d3.forceSimulation`) positions nodes, while matrix cells encode edge weights with opacity. Users can click matrix cells to highlight linked nodes, and zooming via `d3.zoom` scales both views. The code uses D3 v6 and TopoJSON, rendering to SVG.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

test

This example combines a force-directed node-link diagram with an adjacency matrix visualization, allowing interactive exploration of network connectivity. Clicking a node in the diagram highlights its corresponding row and column in the matrix, while clicking a matrix cell reports the presence or absence of a link between the two nodes. The code uses d3.forceSimulation for layout, d3.zoom for panning and scaling, and SVG circles and rectangles for rendering. Data appears to be loaded from an external CSV or TSV source, and the interface supports dragging nodes and dynamically updating matrix highlights in response to selections.

TTimmyLu
91% match
Loading thumbnail…

Matrix

This example combines a force-directed node-link diagram with an adjacency matrix visualization of the same dataset. Clicking a node in the force diagram highlights its corresponding row and column in the matrix, while clicking a matrix cell identifies a specific connection. The code uses `d3.forceSimulation`, `forceLink`, and `forceManyBody` for the graph layout, and renders both views as SVG with `d3.drag` for interaction and `d3.zoom` for panning and scaling.

Aannie520143
87% match
Loading thumbnail…

Matrix

A force-directed node-link diagram and adjacency matrix display the same network data, linked by interactive selection. Clicking a node highlights its corresponding row and column in the matrix. The code uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` from d3-force for the layout, and `d3.select`, `d3.zoom`, and `d3.drag` for interaction. Nodes are sized by group, and the matrix uses precomputed edge hashes to determine cell connections.

Aannie520143
86% match
Loading thumbnail…

Matrix

This example presents two coordinated views of the same graph data: a force-directed node-link diagram rendered with d3.forceSimulation, and an adjacency matrix using reorder.js for layout. Clicking a node in the network highlights the corresponding row and column in the matrix, while clicking a matrix cell highlights its associated link. The matrix uses SVG rectangles with fill-opacity representing connection strength, and both views support zooming and dragging. The code imports d3 v6, d3-force, and reorder.js libraries.

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

Node-link Diagram and Adjacency Matrix

This example presents a network dataset as both a force-directed node-link diagram and an adjacency matrix. The left panel uses `d3.forceSimulation` to position nodes, with zoom and drag interactions; hovering highlights connected nodes. The right panel uses `d3.brushX` for range selection, updating the matrix axes and highlighting corresponding nodes. Data comes from the included edge list, rendered with SVG and animated ticks.

Sshialian
85% 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
84% match
Loading thumbnail…

doing

A force-directed network graph and an adjacency matrix display the same node-link dataset side-by-side. The network view uses `d3.forceSimulation` with forceLink, forceManyBody, and forceCenter to position nodes, which are rendered as SVG circles colored by group and support dragging, zooming, and tooltip interactions. The matrix view encodes links as gray cells in the upper and lower triangles, with group-colored axis bands; a brush filter on the top axis selects nodes to update the matrix. Both views read from external nodes and edges files, with the matrix using `d3.scaleBand` for axis positioning.

LLigoon
84% match