Gist 9a395dc704cccccadb07f5963767f02a

100%

Gist 9a395dc704cccccadb07f5963767f02a

✓ Published0🌍 Public

Last edited Dec 16, 2020

Created on Dec 16, 2020

This visualization maps the projected difficulty of upcoming fixtures for each team in a sports league, using a force-directed network layout. It shows the relationship between teams based on their opponents’ home and away difficulty ratings, with nodes positioned by a simulated physics model. The implementation relies on `d3.forceSimulation` to compute node positions and link forces, while `d3.geoPath` is not used here—instead, SVG elements are drawn for nodes and edges. The data comes from the `next_fixtures.csv` file, which lists team IDs and their assigned difficulty values. The code reads this CSV and renders a static snapshot, without interactive transitions or canvas-based pixel manipulation.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 08396e82bf7fe86a88d9a131f1a2654d

This visualization shows a force-directed network of football (soccer) players, with each node representing a player and edges likely indicating team or shared-match connections. The code uses `d3.forceSimulation` to calculate node positions and applies a custom weighting scheme to influence node size or opacity, though the rendering itself is not shown in the snippet. The weighting logic, defined in `out_weights.py`, modifies each player’s outgoing influence by subtracting fixture difficulty and form (scaled by 10), adding a small penalty for low play chance, and reducing weight for goalkeepers (element type 1). The data source is a pandas DataFrame of player statistics, and the visualization is part of an interactive dashboard built with JavaScript.

CConorAspell

80% match

Loading thumbnail…

Gist 10ad2f6c126f2280c720ff15922f5a5a

This visualization is a force-directed network diagram of a fantasy football team, mapping player connections through shared club or selection data. It shows each player as a node with a label, while weighted links between them are computed and rendered in real time. The code uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to arrange nodes, and `d3.geoPath` is not used—instead, links are drawn as SVG lines and nodes as circles. Player weights from the CSV file (e.g., 14.6 for Lacazette) are encoded via node radius, and the visualization updates smoothly with `transition.attrTween` on position changes. Data comes directly from the embedded `player_weights.csv` array, parsed into JavaScript objects for the simulation.

CConorAspell

80% match

Loading thumbnail…

Gist 39c7e6c0a5bdba5e4a29bcfc73c16c30

This visualization displays the current lineup of a Fantasy Premier League team, encoding each player’s form, cost, and position through a custom force-directed layout. It shows how player attributes relate to team selection and playing chances, with node size or color mapping to form and cost. The code uses d3.forceSimulation to position nodes, d3.forceLink for connections, and SVG paths with d3.arc for circular representations. Data comes from the current_team.csv file, which includes player names, now_cost, form, and chance_of_playing_this_round values. The rendering relies on D3’s scale functions and axis components to encode quantitative variables, while missing chance values are left blank.

CConorAspell

79% match

Loading thumbnail…

Gist 2186477931c9166d8a5f26d5ebcd0e55

This visualization shows a simulated ranking of soccer players based on their fantasy-league value, where each player’s node weight reflects a blend of difficulty, form, and chance of playing. A force-directed layout using d3.forceSimulation positions the labeled nodes, while their size and color encode the computed weight. The chart draws directly from the CSV data in out_weights.csv, with player names as text labels. The code relies on D3’s selection and data-binding methods to bind the tabular rows to circle and text elements, and it uses the simulation’s tick event to update positions dynamically, though no explicit interaction or animation beyond the layout is implemented.

CConorAspell

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

79% match

Loading thumbnail…

Gist 5f8e4eac491a505537b35d6d623bed48

This visualization compares predicted versus adjusted team strength differentials for English Premier League matches, showing how new difference values diverge from older ones. It uses a scatterplot-like layout where each team appears twice—once as home and once as away—with points positioned by strength metrics and connected by lines to highlight changes. The rendering relies on D3.js’s `d3.forceSimulation` for node layout and SVG paths for connectors, while color and size encode the magnitude of the difference shift. Data comes from the embedded `diffs.csv`, which includes team names, strength ratings, and calculated chances. The code computes and displays the numerical gaps, emphasizing how revised calculations alter match outcome predictions.

CConorAspell

78% match

Loading thumbnail…

Gist 36a7cf7abee60da93d334983a2376562

This visualization maps English Premier League match odds onto a scatterplot, where each team matchup is positioned by the home and away win probabilities derived from the bookmaker prices. The chart shows the relative competitiveness of each fixture, with points clustered by the implied chance of a home victory. The code uses `d3.forceSimulation` for layout and `d3.scaleLinear` for axes, reading the comma-separated `odds.csv` file. Point positions are calculated from the raw odds using `d3.pack` or a custom projection, and the visualization is rendered with SVG circles via `d3.select`.

CConorAspell

78% match

Loading thumbnail…

Gist 6583ab0c6c2fb592d0c980d0fa48bbbd

This visualization uses a force-directed simulation to lay out a network of fantasy football players, with each node’s size mapped to a player’s weight attribute from the starters.csv file. The chart reveals the relative heft of players like Wan-Bissaka and Son, contrasting them with lighter picks such as Maupay. Built with D3’s `d3.forceSimulation`, it applies collision and charge forces to space nodes, while `d3.drag` enables interactive repositioning. Node size is encoded via `d3.scaleSqrt`, and the canvas is redrawn each tick, making the weight distribution immediately apparent.

CConorAspell

76% match