node-link diagrams vs. adjacency matrix

100%

node-link diagrams vs. adjacency matrix

✓ Published0🌍 Public

Last edited Nov 9, 2020

Created on Nov 7, 2020

Forked from node-link diagrams vs. adjacency matrix

The example contrasts node-link diagrams with adjacency matrices for a Dublin contact network of 410 nodes and links derived from a TSV dataset. A force-directed layout using `d3.forceSimulation` and `d3.forceLink` positions nodes, while the adjacency matrix renders as an SVG grid where cells are highlighted on node click via `d3.select` and stroke styling. Matrix rows and columns correspond to nodes, with row and column highlighting showing connections. The code employs D3 v6 selections, drag behavior, and the `schemeCategory10` color scale for group encoding.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

node-link diagrams vs. adjacency matrix

This example compares two visualization methods for the same network data: a node-link diagram rendered with `d3.forceSimulation` and an adjacency matrix. Node circles are colored by group and support drag, while clicking either a node or a matrix cell highlights its corresponding row and column in the matrix and dims other links. The matrix uses `d3`-appended SVG rects with fill opacity based on edge weight, and zooming is enabled via `d3.zoom`. The data appears to describe a Dublin contact network with 410 nodes.

Nnomiaro

92% match

Loading thumbnail…

node-link diagrams v.s. adjacency matrix123

This example compares node-link diagrams with adjacency matrices for visualizing network data. It displays a force-directed graph using `d3.forceSimulation`, `forceLink`, and `forceManyBody` alongside a corresponding matrix where cell opacity reflects link weights. Clicking a node in the graph or a grid cell in the matrix highlights the matching link in both views using `d3.select` and stroke styling. The data comes from a CSV of Dublin infection network edges, parsed and rendered as SVG rectangles and drag-enabled nodes.

Wwinniepooh520

91% match

Loading thumbnail…

node-link diagrams vs. adjacency matrix

A side-by-side comparison shows the same 410-node contact network as both a force-directed node-link diagram and an adjacency matrix. Users can click a node in the node-link view to highlight its corresponding row and column in the matrix, revealing the network’s connectivity structure. The node-link view uses `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` for layout, rendered as SVG circles and lines. The matrix is built from CSV data representing pairwise links, with cells colored by group membership based on degree.

Cchungmin-yu

90% match

Loading thumbnail…

node-link diagrams vs. adjacency matrix

This example compares node-link diagrams and adjacency matrices for visualizing a network, using data from the infect-dublin.edges dataset. The node-link view uses d3.forceSimulation to position 410 nodes, while an adjacency matrix rendered as SVG cells shows the same connections. Clicking a node or matrix cell highlights the corresponding row and column in the matrix. The code uses d3.csv for data loading and d3.zoom for interactive scaling on the node-link view.

Wwinniepooh520

90% match

Loading thumbnail…

node-link diagrams v.s. adjacency matrix123

This visualization compares node-link diagrams with adjacency matrices for network data. It displays a force-directed node-link diagram on the left, where nodes can be dragged, and a corresponding adjacency matrix on the right, where each cell represents a potential edge. Clicking a node in the left panel or a grid cell in the right panel highlights the corresponding link in red across both views. The code uses `d3-force` for the force simulation and `d3.select` for interactions, rendering with SVG. The data comes from a CSV file of network edges.

Xx112358

89% match

Loading thumbnail…

node-link diagrams vs. adjacency matrix

This example juxtaposes a node-link diagram with an adjacency matrix to compare two common approaches for visualizing the same network dataset of infection spread in Dublin. The left panel uses `d3.forceSimulation` with `forceLink` and `forceManyBody` to position 410 nodes and their edges, while the right panel renders a 410×410 matrix where each cell indicates a connection. Clicking a node or matrix cell highlights the corresponding row and column, and the code applies `d3.zoom` and drag handlers for interaction. The data comes from a CSV file of edges, and both views use SVG rendering with `d3.schemeCategory10` for node coloring.

LLockingChiao

89% match

Loading thumbnail…

node-link diagrams vs. adjacency matrix

This example compares two network visualization techniques: a node-link diagram and an adjacency matrix. The node-link diagram uses a force-directed layout with draggable, zoomable nodes, while the adjacency matrix displays connections as colored cells; clicking on matrix cells highlights the corresponding links and nodes in both views. The code uses D3 v3’s `d3.layout.force`, `d3.behavior.zoom`, and SVG circles and lines, with data loaded from a space-separated dataset file.

Wwusushi

88% match

Loading thumbnail…

node-link diagrams vs. adjacency matrix

This example compares two visualizations of the same network dataset: a force-directed node-link diagram on the left and an adjacency matrix on the right. The node-link diagram uses a physical simulation to position nodes, with link thickness and node color indicating degree and size. The adjacency matrix displays connections as filled cells in a grid. Both visualizations are built with D3 v3, using the `d3.layout.force` and `d3.behavior.zoom` APIs for the diagram, and a custom grid for the matrix. The matrix allows clicking to explore connections, while the node-link view supports zooming, dragging, and clicking. Data is loaded from a text file of edge pairs.

Cchungmin-yu

88% match