(HW) The World's Highest Paid Athletes in 2018

100%

(HW) The World's Highest Paid Athletes in 2018

✓ Published0🌍 Public

Last edited Nov 8, 2018

Created on Sep 4, 2018

This bar chart displays the top 10 highest-paid athletes of 2018, with earnings combining salaries and endorsements from Forbes data. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for wealth values and `scaleBand` for athlete names. Axes are generated via `axisLeft` and `axisBottom`, while bars are appended as rectangles with widths proportional to each athlete’s total earnings in millions.

AI-generated description

This bar chart ranks the top 10 highest-paid athletes. Their payments include their salaries and the endorsements. The data was collect from Forbes: The World's Highest-Paid Athletes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Highest Paid Celebrities

This horizontal bar chart ranks the world’s highest-paid celebrities of 2015 by earnings, with each bar colored in a muted rose tone. The visualization, rendered as an animated SVG using D3.js, sorts celebrities in descending order of income and animates the bars growing from left to right upon page load. The data comes from a Forbes dataset compiled by Clevejones and includes 40 celebrities across categories such as athletes, musicians, and actors. Hovering over a bar highlights it and reveals the exact earnings value, while the y-axis lists celebrity names and the x-axis shows earnings in millions of dollars. The title and subtitle emphasize the top earners, with Floyd Mayweather leading at $300 million.

CClevejones

80% match

Loading thumbnail…

Data Visualization - ICE-6 - Bar chart

This bar chart displays the total revenue, in millions of dollars, of the world’s top 10 highest-earning athletes, with each bar labeled by the athlete’s name along the vertical axis. The visualization uses React to render an SVG and D3’s `scaleBand`, `scaleLinear`, and `csv` to load and map the data from a remote CSV file. Axes are custom-drawn using D3’s `ticks()` method, with manual positioning of tick labels and lines, while the chart itself highlights red bars with blue text and a red axis grid.

SSravan1888

80% match

Loading thumbnail…

Welcome to - ICE-6 - Bar chart

This bar chart displays the top 10 highest-earning athletes in the world, with values in millions of dollars, based on a CSV file loaded from a GitHub gist. The visualization uses React with D3 v5, specifically leveraging `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `rect` elements for the bars. The chart customizes axes through manually drawn tick lines and text labels, with red gridlines and blue tick labels styled via CSS.

AArruSkywalker

78% match

Loading thumbnail…

s of Data Visualization - ICE-6 - Bar chart

This bar chart displays the world’s top 10 revenue-generating athletes, showing their total pay in millions of dollars. It highlights how D3 axes can be customized with blue tick labels and red gridlines. The code uses React hooks with `useState` and `useEffect` to fetch CSV data, then renders SVG rectangles via D3’s `scaleBand` and `scaleLinear`. Custom axes are drawn manually, while the chart loads data from a GitHub gist URL.

SSaahithi49

74% match

Loading thumbnail…

2018 World Champions

This bar chart displays the 2019 salaries of active Boston Red Sox players, highlighting that the highest salary exceeds five times the tenth-highest value. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map salary data from a CSV file, with red bars rendered as SVG rectangles. Axis labels and a title are added via `axisBottom` and `axisLeft`, while tick lines and domains are customized. Data originates from Spotrac as of 07-May-2019.

BBirmanTAZ

74% match

Loading thumbnail…

Fork of Data Visualization - ICE-6 - Bar chart

This visualization displays a horizontal bar chart of the world’s top 10 revenue-generating athletes, with bars sized by total pay in millions of dollars. The React component uses `useState` and `useEffect` to load CSV data via D3’s `csv` method, then renders SVG rectangles scaled with `scaleBand` and `scaleLinear`. Custom axes are drawn manually, including tick lines and labels, while CSS styles colored bars red and tick text blue. Data originates from a GitHub Gist, loaded asynchronously before rendering the chart.

NNHRK555

74% match

Loading thumbnail…

DV ICE 6

This example visualizes the top 10 revenue-generating athletes using a bar chart that maps TotalPay to bar width and athlete names to vertical bands. The chart uses React for component state and lifecycle, while D3 v5 handles data loading via `d3.csv` and scales (`scaleLinear` and `scaleBand`) to position elements. SVG rectangles render the bars, and axes are custom-built with D3’s `scaleBand` and `scaleLinear` APIs, styling tick text and lines directly. The data is fetched from a remote CSV file hosted on GitHub Gist.

Mmanishcheruku

73% match

Loading thumbnail…

Fork of DV ICE 6

This bar chart displays the top 10 athletes by revenue in million dollars, using a horizontal bar layout with red bars and custom-styled axes. The visualization is built with React and D3 v5, employing `scaleBand` and `scaleLinear` to map athlete names and revenue values to SVG coordinates. Data is loaded from a CSV file via `d3.csv`, and the chart includes customized tick marks, red gridlines, and blue text labels. The axes are manually constructed using D3’s scale functions rather than pre-built axis components.

Mmanishcheruku

73% match