node-link diagrams vs. adjacency matrix

100%

node-link diagrams vs. adjacency matrix

✓ Published0🌍 Public

Last edited Nov 7, 2020

Created on Nov 7, 2020

Forked from d3-force

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.

AI-generated description

Relation Graph with Grab and Zoom features implemented.

TODO:

Legends, Class of Links

Based on force-directed-graph. The data comes from Les Misérables.

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

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

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

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

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

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

Loading thumbnail…

D3 Node-Link Diagram

This example shows a node-link diagram of social network data, using a force-directed layout to position 16 nodes and their connecting links. The visualization uses D3 v7's `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to calculate the layout, while rendering nodes as SVG circles and edges as lines with animated tick updates. Node colors come from `d3.scaleOrdinal` with the `schemeSet1` palette, and hovering a node triggers a tooltip via mouseover events. Data is loaded from a CSV file containing source, target, and link values.

Mmariahdiaz

86% match