Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Rrykay
Last edited Apr 7, 2022
Created on Apr 7, 2022
Forked from HTML Starter

This visualization uses a bar chart to show the percentage of points Rafael Nadal won under pressure across seven clay-court tournaments, including Monte Carlo, Rome, Barcelona, Buenos Aires, Roland Garros, Sao Paulo, and Madrid. The bars are colored with a sequential quantized scale (`d3.scaleQuantize`) ranging from light to dark red, and a legend from the d3-legend library indicates the percent values. The chart is rendered with SVG using D3 v7’s `d3.scaleBand` and `d3.axisBottom`/`d3.axisLeft`, with data loaded from a CSV file hosted on GitHub.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

le cose del tennis

This bar chart displays the total points won in response by four tennis players during an ongoing tournament, with player names on the vertical axis and the count on the horizontal. The visualization uses D3 v5, reading data from a CSV file and rendering as an SVG. It employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` with tick marks, while custom CSS styles the red bars and large monospace labels.

HHombreLobotomia
73% 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
72% 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
72% match
Loading thumbnail…

Untitled

A stacked bar chart displays percentages for ten soccer match statistics, such as shots, possession, and passes, with two contrasting categories compared per category. Built with D3 v7 and SVG, the visualization uses `d3.stack()` to compute the stacked layout and `d3.scaleLinear` for the percentage axis. Bars animate sequentially using `d3.transition()` with staggered delays and an `easeLinear` timing. The chart omits axis labels and draws category names as text elements placed manually via a loop.

CCasado7
71% match
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
71% match
Loading thumbnail…

projet v13

This visualization tracks the progression of tennis players through a Grand Slam tournament, showing the difference in ranking between each player and their opponents across seven rounds from the first round to the finals. The code processes match data from a CSV file to build a dataset of wins and losses for each player, then plots these ranking differences as lines on an SVG chart. It uses d3.v3 to parse the data, create scales, and render the line paths, with solid lines representing actual wins and dashed lines for predicted or simulated outcomes.

NNaram22
70% match
Loading thumbnail…

projet final

This interactive visualization tracks tennis players’ progress through a Grand Slam tournament, showing the ranking difference against each opponent across seven rounds. Each player appears as a node on a line chart, with separate paths for wins and losses, and a button resets the view. Built with D3.js v3, it loads ATP match data from CSV files, processes player rankings and match outcomes, and renders the animated SVG chart with axes, grid lines, and tooltips.

NNaram22
70% match
Loading thumbnail…

projet

This visualization displays the evolution of 32 tennis players' ranking differences from their opponents across seven tournament rounds, from the first round through the finals. Multiple colored lines trace each player’s path, showing the rank gap between the player and their opponent at each stage. Built with D3.js v3, it uses SVG for rendering, with an ordinal x-axis for rounds and a linear y-axis for rank differences. The data comes from a CSV file containing ATP match information, parsed using d3.csv.

NNaram22
70% match