Dot Plot: Goals: MessiVRonaldo

100%

Dot Plot: Goals: MessiVRonaldo

✓ Published0🌍 Public

Last edited Nov 16, 2022

Created on Oct 31, 2022

This dot plot compares Lionel Messi and Cristiano Ronaldo’s goal totals by season, with each year on the y-axis and a grey line connecting the two players’ goal counts. The visualization overlays the plot on a football pitch diagram, using SVG rectangles and lines for field markings. Built with D3 v4, it uses `d3.scaleLinear` and `d3.scaleBand` for axes, while circles are colored green for Messi and purple for Ronaldo. Clicking the player labels toggles the corresponding data points’ opacity via `d3.selectAll` and `.transition()`. Data is loaded from a CSV via `d3.csv`.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bubble Plot: Messi vs Messi

This bubble plot compares Lionel Messi’s goals and assists across seasons, with each bubble representing a year. Bubble size encodes the same metric as the Y-axis, while color represents the season. The chart uses D3 v4 with an SVG renderer, a linear scale for axes, a square-root scale for bubble radius, and a categorical color scale. Hovering reveals a tooltip with year details, and hovering a bubble dims all others to highlight the selected season.

SSimon Hackbert

78% match

Loading thumbnail…

Fork of Bubble Chart in D3

This bubble chart compares Lionel Messi’s goals and assists across seasons from 2004 to 2022, with each circle sized by the square root of goals and colored by year. It uses d3.csv to load the data, d3.scaleLinear for axes, d3.scaleSqrt for bubble size, and d3.scaleOrdinal for color mapping. The SVG rendering includes axis labels and hover effects that alter circle strokes.

EEunice Tu

74% match

Loading thumbnail…

Data viz of 2018 football top scorers

This interactive scatter plot visualizes data on the top football scorers of 2018, comparing the number of goals scored against matches played. The data is filtered to show only players from La Liga, Serie A, and Bundesliga. Player names are revealed on hover, while the color of each point indicates the league, and the point size encodes the average shots per match. Built with React and D3 v5, the visualization uses D3's `scaleLinear` for the axes, `scaleSqrt` for sizing, and `scaleOrdinal` with `schemeCategory10` for the categorical color legend.

NNwaegerue Chinemerem

70% match

Loading thumbnail…

Bar Chart: Goals

A bar chart compares total career goals for different footballers, with green bars animating upward in sequence from an initial zero position. The chart includes custom axes, rotated labels, and a football pitch overlay with field markings and penalty areas drawn behind the bars. It uses D3 v3 and v4 together, loading data from a CSV file, and relies on `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `selection.transition()` with duration and delay for the animated bar growth.

SSimon Hackbert

67% match

Loading thumbnail…

Bar Chart

This bar chart visualizes the most goals scored by professional footballers, with player names on the y-axis and goal counts on the x-axis. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for the axes, and d3.axisBottom with tick formatting. Purple rectangles are rendered in SVG, and the chart includes a title and axis label.

RRashesh4

67% match

Loading thumbnail…

Bar Chart: Goal Contributions

This bar chart displays total career goals and assists for individual players, with each bar growing upward in a staggered animation. The visualization overlays the chart on a scaled soccer field outline, complete with penalty areas, a center circle, and a halfway line. Built with D3 v4, the code uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `transition()` with `.delay()` to animate bar heights. Data is loaded from a CSV file via `d3.csv`, and SVG shapes render the field markings.

SSimon Hackbert

67% match

Loading thumbnail…

Goals Scatter Plot with Hover

This scatter plot visualizes the relationship between goals scored and shots taken by football players in 2018, drawing from the Top Football Leagues Scorers dataset. Each point represents a player, with circle color indicating the league (La Liga, Serie A, Bundesliga, or Premier League), and hovering over the visualization updates the state to potentially display contextual information. Built with D3.js, the chart utilizes `scaleLinear` for axis scaling, the `axes` component from `@curran/responsive-axes` for layout, and `select` and `join` operations to render and update the SVG elements. The plot also uses `observeResize` to handle responsive resizing and a custom color function to map league names to colors.

Eeschuman20@gmail.com

67% match

Loading thumbnail…

Goals Scatter Plot with Scale

This animated scatter plot visualizes top football league scorers from a 2018 Kaggle dataset, plotting each player's goals against their shots taken. Points are colored by league using an ordinal color scale with a clickable legend that filters the data through hover interactions. Built with D3.js, the visualization employs responsive axes, linear scales for positioning, and smooth transitions to enlarge points on mouseover, while a legend allows users to highlight specific leagues.

Eeschuman20@gmail.com

66% match