Skip to main content
SimilarExport ZIP
100%

Scatter Plot ATP Match Statistic

✓ Published1🌍 Public
MManh Pham
Last edited Sep 30, 2021
Created on Sep 22, 2021

This scatter plot visualizes ATP tennis match statistics from 2015, plotting each match’s winner ranking on the x-axis and loser ranking on the y-axis. The chart uses d3.csv to load the data, then applies d3.scaleLinear and d3.extent to map rankings to screen coordinates, with circles rendering the data points. Axes are generated using d3.axisLeft and d3.axisBottom, and the SVG output fills the entire viewport. The dataset comes from a public Gist containing the 2015 ATP match records.

AI-generated description

The visualization is a scatter plot of ATP match stats in 2015. Each point represents winner's world ranking and the loser's world ranking that corresponds to x-axis and y-axis respectively

Source of data can be found in my Gist here

MIT Licensed

Similar vizzes

Loading thumbnail…

projet v0

This visualization tracks the progress of a single ATP tennis player through seven tournament rounds, plotting the ranking difference between the player and each opponent as a line chart. The blue line uses `d3.svg.axis` and `d3.scale.ordinal` for the round labels, with a linear y-scale for ranking gaps. Data is loaded from `test_atp.csv` and processed into per-player match results, though only one indexed player’s path is displayed.

NNaram22
76% match
Loading thumbnail…

projet v2

This example visualizes the ranking differences of ATP tennis players across tournament rounds, tracking the change in rank against their opponents. It uses a line chart to show the progression for a selected player, with the x-axis representing the rounds from the first round to finals and the y-axis indicating the ranking difference. The code processes a CSV dataset of match results to calculate these differences, then renders the chart using the D3.js library with SVG, employing `d3.scale.ordinal()` for the x-axis, `d3.scale.linear()` for the y-axis, and `d3.svg.axis()` for the axes.

NNaram22
75% match
Loading thumbnail…

projet v22

This visualization shows the ranking differences between winners and losers across the rounds of a Grand Slam tennis tournament, with each player represented as a line tracking their progress from the first round through the finals. The SVG chart uses two line styles—a solid steelblue line for wins and a dashed line for losses—and includes a reset button to reinitialize the animation. Built with D3 v3, the code loads ATP match data from a CSV file, parses player rankings, and constructs a parallel-coordinates-style plot with an interactive tooltip.

NNaram22
74% match
Loading thumbnail…

projet debug

This visualization shows the progression of ATP tennis players through a tournament, plotting the ranking difference against their opponents in each round. The code processes match data from a CSV file to extract player rankings and builds a custom dataset that tracks each player’s path through the bracket. A line chart with two line styles (solid and dashed) renders the results, while a reset button allows the view to be refreshed. The visualization uses D3 v3, including the `d3.csv` method for data loading and D3’s SVG axis and line generators.

NNaram22
73% match
Loading thumbnail…

projet v15_test

This visualization tracks the progression of tennis players’ ranking differences across seven tournament rounds, using a line chart built with D3 v3’s SVG utilities. The code parses a CSV dataset, assigns missing ranks to unranked players, and constructs a multiseries display where each line represents a player, with solid segments for wins and dashed segments for losses. The chart uses D3 scales, axes, and grid lines, with a steelblue stroke for the lines. The underlying data comes from the provided `test_atp.csv` file, and the visualization is rendered entirely in SVG.

NNaram22
73% match
Loading thumbnail…

projet vfinal

An interactive line chart visualizes player rankings from ATP tennis tournament match data. The visualization uses D3.js (v3) to parse CSV match results, track individual player progression through tournament rounds, and display the difference between player rankings and their opponents' rankings. Animated SVG paths with dashed and solid line styles represent player trajectories, while a reset button and tooltips provide interaction. The code also includes dataset files and uses the `d3.csv` function to load and process the external tennis tournament data.

NNaram22
73% match
Loading thumbnail…

Scatterplot with Voronoi

This example visualizes tennis match data as an interactive scatterplot, plotting points per set against shots per set, with each point colored by set score and sized by points per game. The chart uses D3.v3 with SVG and animated transitions to update between per-set and per-game views, while a Voronoi overlay enables hover highlighting of data points. Users can filter by clicking legend items, zoom on selections, and highlight specific matches by searching for player names.

TTennisVisuals
72% match
Loading thumbnail…

projet v12

This visualization plots the ranking differences of 128 tennis players across seven tournament rounds, showing how each player's rank compares to their opponent's rank in each match. The SVG chart displays multiple line series, one per player, using blue strokes to trace the progression of ranking gaps from the first round through the finals. The code loads match data from a CSV file, calculates rank differences, and constructs a data array for each player before rendering the lines with d3.svg.line and d3.scale.ordinal for the x-axis.

NNaram22
72% match