RugbyResults

100%

✓ Published0🌍 Public

Last edited Dec 19, 2017

Created on Dec 19, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Matrix Example

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.

CConorAspell

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

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…

Gist 97af63fb6b3e02655c4be44c0bafb29f

This example visualizes rugby player selections and costs for three Six Nations matches, showing each player’s position, team, and venue. A force-directed simulation, using `d3.forceSimulation`, positions players as nodes, with colors or links encoding team and game. The code reads `combined_info.csv` and uses D3.js to render the network, highlighting positional roles (Prop, Hooker, Lock) and player costs. The visualization reveals team composition and player distribution across home and away matches.

CConorAspell

76% match

Loading thumbnail…

Gist 0b5a00471f198e6e1671949239f0c45b

This visualization maps rugby starting lineups for multiple Six Nations matches, using a network layout to connect each team’s players to their match and opponent. Node colors distinguish teams, while edges link players to their respective games, with home and away status encoded by node position or style. Built from the `starting_teams.csv` data by ConorAspell, the chart highlights lineup compositions across four matches, with a force-directed or hierarchical arrangement to reveal team structures and opponent pairings at a glance.

CConorAspell

75% match

Loading thumbnail…

Gist 0628ccf06b4e693bb97577d351b52882

This example visualizes a rugby team’s player positions as a node-link diagram. It shows each player’s name and on-field role, with nodes colored by position category. The visualization uses `d3.forceSimulation` to arrange the nodes and `d3.geoPath` to render the pitch outline in the background. Data comes from `team_week_1.csv`, which lists player names and their positions. The code also employs Canvas `getImageData` to detect node overlaps and adjust forces accordingly, ensuring labels remain readable without overlapping.

CConorAspell

74% match

Loading thumbnail…

Gist c06e3cad00ff2a9c1ea9ab012b708d67

This visualization maps player selections for Six Nations fantasy rugby, plotting each player as a node by gameweek and team, with node color encoding position and size encoding cost. The data is drawn from `final_info.csv` and uses a force-directed or deliberate spatial layout to group teams—home squads (e.g., Wales, Ireland, France) and away squads (Italy, Scotland, England)—with player names and shirt numbers labeled. Weight values are mapped to node opacity or stroke, and the chart allows comparison of team composition, positional spread, and cost distribution across the two squads per match.

CConorAspell

71% match

Loading thumbnail…

Gist 9e7f962de44840b48f6f27bcbe4d8cd8

This scatterplot-like visualization maps player names, positions, and scores from a team.csv dataset, encoding score on the y-axis and position on the x-axis. It uses d3.forceSimulation to position overlapping labels and nodes, with a d3.scalePoint for categorical positioning and d3.select to bind data. Each player is represented by a circle colored by position, with a text label showing their name and score. The chart renders in SVG via d3, with axes generated by d3.axisLeft and d3.axisBottom. The visualization highlights scoring distribution across positions, such as high-scoring back-rowers and fly-halves, without additional interactivity.

CConorAspell

68% match