Skip to main content
SimilarExport ZIP
100%

node-link diagram and adjacency matrix

✓ Published1🌍 Public
Ddrean205287
Last edited Nov 6, 2020
Created on Nov 4, 2020
Forked from Hello VizHub

This example presents a node-link diagram of the infect-dublin network alongside an adjacency matrix, with nodes colored by degree. Users can reorder the matrix by node name or degree via a dropdown. The network is rendered using `d3.forceSimulation` with link, charge, and center forces, while the matrix is drawn as SVG rectangles. The code uses D3 v4 and parses the edge list from the `infect-dublin.edges` file.

AI-generated description
MIT Licensed

Similar vizzes

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

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
87% 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
87% 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
85% 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
85% match
Loading thumbnail…

Node-link Diagram and Adjacency Matrix

This example presents a network dataset as both a force-directed node-link diagram and an adjacency matrix. The left panel uses `d3.forceSimulation` to position nodes, with zoom and drag interactions; hovering highlights connected nodes. The right panel uses `d3.brushX` for range selection, updating the matrix axes and highlighting corresponding nodes. Data comes from the included edge list, rendered with SVG and animated ticks.

Sshialian
83% match
Loading thumbnail…

Matrix

This matrix visualization displays the adjacency relationships between 410 nodes from the infect-dublin network dataset. The code uses D3.js to render an SVG adjacency matrix where colored rectangles along the top and left edges represent node groups, and gray cells indicate connections. A brush interaction allows selecting a range of nodes, triggering a smooth transition that reorders the matrix to focus on the selected subset, with axis labels appearing when the selection is small enough.

Xx112358
83% match
Loading thumbnail…

Adjacency Matrix

This example visualizes a network of 410 nodes and their connections as a symmetric adjacency matrix, using the infect-dublin edge dataset. The matrix cells are rendered as SVG rectangles, with rows and columns colored by node group. Users can brush along the top axis to filter the matrix; a selection triggers animated transitions that re-scale the axes and reposition the corresponding cells. Built with D3.js v4, it relies on `d3.scaleBand`, `d3.brushX`, and `transition.attr` to update the visualization.

Sshialian
83% match