D3 Matrix Example

100%

D3 Matrix Example

✓ Published0🌍 Public

Last edited Dec 30, 2017

Created on Dec 19, 2017

This example visualizes the 2017 international rugby season as a directed force-directed graph. The network shows the 10 tier-1 nations as labeled circles, with node size reflecting in-degree centrality (larger nodes indicate better results, as the values are reversed for intuitive interpretation). Arrowed links represent match outcomes, with link width and opacity encoding the margin of victory—thicker, more opaque edges indicate larger winning margins. Node colors are assigned via a categorical scale, and the graph layout is computed using D3's physics simulation to position the nodes. The data was preprocessed with NetworkX to calculate centrality measures, providing a compact view of relational performance across the season.

AI-generated description

A force directed graph uses a physics simulation to lay out a network. It has a huge amount of uses in many different fields, with this Block I decided to explore it's potential in analysing a sporting teams season.

I selected Rugby Union as the sport to analyse as it has an assymmetric season, i.e. everyone will not play everyone.

I created a CSV of all the results of the 2017 international rugby season between tier 1 nations and created a directed graph using NetworkX for Python from the data and produced the JSON for this visualisation. Using NetworkX I also calculated each node's centrality which affects the node's size in the above visualisation

The centrality measure was in-degree centrality, this measures how well connected the incoming edges are connected to the rest of the network. A high value would indicate that the teams who beat you, were beaten by a lot of others, as well as that you were beaten by a lot. England and New Zealand both had values of 0.11 recurring while Ireland had 0.22 recurring and Scotland had 0.33, indicating that these teams had good seasons. Note, in the visualisation the values are reversed as it is more intuitive that larger nodes had better seasons. The degree centrality does not account for weight either, meaning the margin of victory does not affect the centrality or node size.

One of the more interesting countries to observe in this visualisation is South Africa. It is almost universally acknowledged that they had a terrible season in 2017, however, the in-degree centrality measure has them performing at the same level as Australia and France and better than Wales, Argentina and Italy. This is due to their big victories against France, Argentina and Italy, as well as a victory against Wales and 2 draws against Australia, offsetting losses to Ireland, England and New Zealand.

Wales is also interesting to observe as they had a very mixed season while playing every team except Argentina. They had 3 wins to 5 losses putting them below the top teams but all the games were close.

mit Licensed

Similar vizzes

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

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

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

82% match

Loading thumbnail…

RugbyResults

This example visualizes a network of international rugby match results, where each country is a node and each match is a link weighted by the score difference. The code loads the dataset from a JSON file and draws the graph using D3 v4, though the visualization is currently a static placeholder—the network layout is not yet implemented. It uses `d3.json` to fetch the data and `d3.scaleOrdinal` for color mapping, but no force simulation or link/ node rendering is applied, leaving the graph invisible beyond the initial text.

CConorAspell

80% match

Loading thumbnail…

D3 Matrix Example

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.

CConorAspell

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

77% match

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

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

73% match