D3 Matrix Example

100%

D3 Matrix Example

✓ Published0🌍 Public

Last edited Jun 2, 2018

Created on Jun 2, 2018

This matrix diagram uses D3.js to visualize a directed network of MMA fighters as an adjacency matrix. Nodes are listed along both axes, with links shown as colored cells and directional arrows. Node names and edges are derived from the provided JSON, and the centralities indicate node importance, with higher values suggesting more significant connections in the dataset. Rendered as SVG using D3 v3.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/ConorAspell/'>ConorAspell</a>'s block: <a href='http://bl.ocks.org/ConorAspell/e79d5fbc701c28b48082bd93b3ce0747'>Rockhold vs Romero</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Matrix Example

This example uses a force-directed layout to visualize a directed graph of MMA fighter relationships, with 16 nodes and 19 directed links. Node size encodes each fighter’s centrality score, while node color distinguishes groups. Link opacity and stroke-width encode link weight on a 0–100 scale, and arrows indicate direction. The force simulation spaces the nodes using charge and link distance parameters, and labels identify each fighter.

CConorAspell

90% match

Loading thumbnail…

D3 Matrix Example

This example uses D3.js to visualize a force-directed network of UFC fighters, with node size reflecting a centrality measure and link width/opacity encoding the strength of connections. Each fighter is a labeled circle, positioned by a physics simulation with link distances proportional to edge weight. The graph is rendered in SVG with directed links, showing the structure of the fight network. Data is loaded from an external JSON file, and the visualization includes interaction through the force layout's built-in drag-and-drop behavior.

CConorAspell

89% match

Loading thumbnail…

D3 Matrix Example

This D3 force-directed graph visualizes a directed social network, where each node represents an individual and links indicate relationships. Relationship strength is encoded by path length: stronger connections have shorter, more tightly curved edges. Direction is shown with markers (arrowheads), and curved paths help reduce visual overlap. The graph is rendered with SVG and includes animated transitions as the force simulation stabilizes. Node colors encode group membership, while link curvature conveys directionality, making the network structure easier to parse. This example builds on earlier rugby result network blocks by ConorAspell and Ericcoopey.

CConorAspell

81% match

Loading thumbnail…

D3 Matrix Example

This D3.js example visualizes a directed social network as a force-directed diagram. Nodes represent individuals, and curved paths with arrow markers indicate relationships, with link length inversely proportional to relationship strength. Link opacity encodes value via four classes. The visualization animates the layout and supports interactive click and double-click actions to highlight nodes and text.

663anp3ca

79% match

Loading thumbnail…

D3 Matrix Example

This force-directed graph visualizes a social network of international rugby teams, with nodes representing countries and links depicting match results. Relationship strength is encoded through both link distance—shorter paths indicate stronger ties—and link opacity, which is binned into four discrete levels based on the link value. Arrow markers on the directed links show the direction of each relationship, while node size reflects centrality. The layout uses a force-directed simulation with negative charge to push nodes apart, and links are drawn as curved arcs via SVG path transformations, creating a clear, animated view of the network's structure.

CConorAspell

79% match

Loading thumbnail…

D3 Matrix Example

This visualization uses D3.js v3 and a force-directed layout to display the relationships between rugby teams, with nodes representing teams and curved, arrowed paths representing match scores between them. Link opacity and stroke width encode the value of each connection, scaled linearly from 0 to 100 percent. The code uses `d3.layout.force`, `d3.scale.linear`, and SVG markers for arrowheads, loading data from a JSON file, and renders the network on an SVG canvas.

CConorAspell

78% match

Loading thumbnail…

Matrix

This example presents two coordinated views of the same graph data: a force-directed node-link diagram rendered with d3.forceSimulation, and an adjacency matrix using reorder.js for layout. Clicking a node in the network highlights the corresponding row and column in the matrix, while clicking a matrix cell highlights its associated link. The matrix uses SVG rectangles with fill-opacity representing connection strength, and both views support zooming and dragging. The code imports d3 v6, d3-force, and reorder.js libraries.

Aannie520143

77% match

Loading thumbnail…

Adjacency Matrix Using D3

This adjacency matrix visualizes connections between nodes in a hi-tech firm network using a grid where colored cells indicate edges. The D3.js v7 code renders the matrix as SVG rectangles, with row and column labels for node IDs, and highlights entire rows and columns on hover with a tooltip showing link details. It uses d3.scaleBand for positioning, d3.csv for data loading, and the d3-legend library for potential legend support, with data sourced from networkrepository.com.

OOlha

77% match