HW6_0660035

100%

✓ Published0🌍 Public

Last edited Jan 28, 2021

Created on Jan 28, 2021

Forked from Matrix

This example combines a force-directed node-link diagram with an adjacency matrix to explore network connectivity. Clicking a node in either view highlights its corresponding row and column in the matrix, while the node diagram supports dragging and zooming via `d3.zoom`. The SVG renders with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` for layout, and the matrix uses `rect` elements with opacity encoding edge presence. Node size encodes group membership, and the data is loaded from an external source using `d3.tsv` or `d3.csv`.

AI-generated description

React Starter code.

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

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

87% match

Loading thumbnail…

node_link_diagrams_and_adjacency_matrix

This example combines a node-link force-directed graph with an adjacency matrix to explore network relationships. The left SVG renders a force-directed layout using `d3.forceSimulation` and `forceLink`, with nodes colored by group and sized by degree, supporting drag and zoom interactions. The right SVG displays the adjacency matrix as a grid of cells, where each cell’s fill encodes connection strength. Clicking a node in the graph or a matrix cell highlights the corresponding row and column in red, while also emphasizing linked edges, allowing users to correlate structural positions across both representations. The code uses D3 v6 with SVG rendering.

Yyixinxu2020

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

86% match

Loading thumbnail…

Force Directed Graph

This example combines a force-directed graph with an adjacency matrix to visualize network connections. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while links are drawn as SVG lines with widths proportional to edge values. Clicking a node highlights its corresponding row and column in the matrix, and both elements support zooming via `d3.zoom`. Node colors and radii encode group membership, with a legend showing the six group categories.

LLigoon

85% match

Loading thumbnail…

Force Directed Graph

This example combines a force-directed node-link diagram with an adjacency matrix to compare two visualizations of the same graph data. The SVG diagram uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while drag interactions and zoom controls are enabled via `d3.drag` and `d3.zoom`. The adjacency matrix displays link weights through cell opacity, and clicking a node or matrix cell highlights corresponding links and rows in both views. The code loads data via `d3.csv`, `d3.tsv`, and `d3.text`, rendering with D3 v6.

LLigoon

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

85% match

Loading thumbnail…

Force Directed Graph

This example combines a force-directed node-link diagram with an adjacency matrix to visualize the same graph data in two coordinated views. Clicking a node in the left network highlights its corresponding row and column in the matrix, and vice versa. The layout is built with d3.forceSimulation, d3.forceLink, and d3.forceCenter, while the matrix cells are rendered as SVG rects with opacity encoding edge weight. Both views support zooming and dragging via d3.zoom and d3.drag.

LLigoon

85% match