Fork of Version two: Top Athletes

100%

Fork of Version two: Top Athletes

✓ Published0🌍 Public

Last edited May 19, 2023

Created on May 19, 2023

This bar chart displays the top 40 Olympic athletes ranked by total medal count, with each bar color-coded by medal type. Hovering reveals a tooltip with athlete name, country, year, event, and medal. The visualization is built using vega-lite-api with d3.csv for data loading, aggregating athlete totals, and filtering the dataset. The underlying data comes from a Kaggle Olympic Games dataset, and the chart uses Vega-Lite's markBar and count aggregations with a custom tooltip handler.

AI-generated description

A barchart uses vega-lite-api.

Iterate work changes

I changed the font size of the y-axis, and now the full name of the athlete can be displayed. In addition, I increased the number of top athletes. The type of medal is added to the tool tip to clearly show the medals won in the event. The font size of the tooltip has been adjusted.

It is forked from top 20 athlets.

Data and Description

This bar chart shows the top athletes and their medals. It's designed to emphasize the top athletes in olympic games which data is collected by olympic data. Each bar references an athlete.This is an interactive bar chart. When your mouse is pointed at the athlete's bar, it will display the athlete's name, the year of the medal and the event in which the medal was awarded.

The data is extracted from kaggle.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Version two: Top Athletes

This interactive bar chart displays the top 40 athletes by medal count, with each bar representing an athlete and its length indicating the number of medals won. Hovering over a bar reveals a tooltip showing the athlete’s full name, medal type, event, and year. Built with the Vega-Lite API, the visualization loads Olympic Games data from a local CSV file via `d3.csv`, and uses `vl.markBar()` to encode the categorical athlete names on the y-axis and the aggregated medal count on the x-axis. The chart also uses `vl.tooltip()` for detail-on-demand and custom axis styling from a shared config object.

Vvoid-LSTM

94% match

Loading thumbnail…

Version two: Top Athletes

This interactive bar chart displays the top 40 Olympic athletes and their medal counts. Each bar represents an athlete, with bar length indicating total medals earned. Hovering over a bar reveals a tooltip with the athlete’s name, country, year, event, and medal type. Built with Vega-Lite and rendered through the vega-lite-api, the visualization uses data sourced from a Kaggle Olympic Games dataset. The chart supports filtering and sorting by medal count, with color encoding distinguishing medal types.

RRuofan Chen

94% match

Loading thumbnail…

Version three: Top Athletes

This interactive bar chart highlights the top 40 Olympic athletes by total medal count, with each bar colored by medal type (gold, silver, bronze). Hovering reveals the athlete’s name, country, year, event, and medal via a tooltip. Built with Vega-Lite API and D3 v5, it loads CSV data from a GitHub gist derived from Kaggle’s Olympic dataset, computes totals in `getData`, and renders the visualization using vega-tooltip for interactivity.

RRuofan Chen

92% match

Loading thumbnail…

Version one: Top 20 Athletes

This interactive bar chart displays the top 20 Olympic athletes ranked by total medal count, using data from a Kaggle dataset on Olympic Games. Each bar represents an athlete, colored by medal type, with tooltips revealing the athlete’s name, medal year, and event. The visualization is built with D3 v5 and Vega-Lite API, using `vl.markBar()` for rendering and `vega-tooltip` for interactivity. Data is filtered and aggregated client-side from a CSV source via `d3.csv`, with bars sorted descending by medal frequency.

RRuofan Chen

89% match

Loading thumbnail…

Bar chart for the olympic medals

This bar chart shows the number of Olympic medals won by the top 10 countries, with countries on the y-axis and medal counts on the x-axis. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. Axes are customized using `d3.axisLeft` and `d3.axisBottom`, with grid lines and a custom tick format. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and the chart includes axis labels and a title.

Aakhil kata

78% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays Olympic medal counts for the top 10 countries, with orange bars labeled by country and an x-axis showing medal totals in abbreviated format. The data comes from a CSV file loaded via `d3.csv`. The visualization demonstrates axis customization using `d3.axisLeft` and `d3.axisBottom` with `d3.scaleLinear` and `d3.scaleBand`, including custom tick formatting, tick lines in green, and rotated labels. The chart renders in SVG with a red title and axis labels styled through CSS.

Nnagamaheswar

77% match

Loading thumbnail…

Version one: Medal by Discipline in top 10 Countries

A linked bar and pie chart visualizes medal counts by discipline for the top 10 Olympic countries. Hovering over a country's bar triggers an animated pie chart showing that country's medal distribution across disciplines, using `d3.pie` and `arc` with a `transition.attrTween` for animation. The bar chart uses `d3.scaleBand` and `d3.scaleLinear`, while a custom `colorLegend` function renders the categorical color scale. Data comes from Kaggle’s Olympic Games dataset, counted by individual athletes rather than events.

RRuofan Chen

76% match

Loading thumbnail…

Fork of ICE 6 - Likith Chowdary Nuthi

This bar chart displays the gold medal counts for the top 10 countries from a CSV dataset of Olympic medal records. The visualization uses D3.js version 5 within a React application, employing `scaleBand` for the categorical country axis and `scaleLinear` for the numeric gold medal axis. The SVG output renders orange bars with green gridlines and axis labels. Data is loaded asynchronously using D3’s `csv` function, and React’s `useState` and `useEffect` hooks manage the data loading and rendering process.

SSheshidharreddy

76% match