node-link diagrams v.s. adjacency matrix123

100%

node-link diagrams v.s. adjacency matrix123

✓ Published1🌍 Public

Last edited Nov 8, 2020

Created on Nov 8, 2020

Forked from 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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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

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

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

91% match

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

91% match

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

90% match

Loading thumbnail…

node-link diagrams vs. adjacency matrix

This example demonstrates a force-directed node-link diagram of a social network, using data from Dublin infection contact traces. The visualization shows 410 nodes and their connections, with node colors representing group assignments based on link counts. Implemented with d3.forceSimulation, d3.forceLink, and d3.forceManyBody, it computes the layout. Users can drag nodes and zoom the SVG canvas using d3.zoom. Node and link positions update on each simulation tick, and the graph is rendered as SVG circles and lines.

Cchungmin-yu

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

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

87% match