Skip to main content
SimilarExport ZIP
100%

node-link diagrams vs. adjacency matrix

✓ Published0🌍 Public
Nnomiaro
Last edited Nov 25, 2020
Created on Nov 7, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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.

Aaddword527
92% 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
91% 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 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
90% 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
90% 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
90% 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
89% match
Loading thumbnail…

Node-Link Diagrams vs. Adjacency Matrix

This example presents a side-by-side comparison of two network visualization techniques: a node-link diagram and an adjacency matrix. The node-link diagram uses a force-directed layout, allowing users to drag nodes, zoom, and click to highlight connections, which are mirrored in the matrix. Clicking a matrix cell highlights the corresponding link in the diagram. The implementation relies on `d3.forceSimulation`, `d3-force`, and `d3.zoom` for interaction, while the matrix is rendered as SVG rects. The data is mapped from the same graph structure, with node size and color encoding group membership.

Iimsohandsome123
88% match