Skip to main content
SimilarExport ZIP
100%

Version two: Top Athletes

✓ Published3🌍 Public
RRuofan Chen
Last edited Nov 17, 2021
Created on Sep 29, 2021

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.

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…

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
97% 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
94% match
Loading thumbnail…

Fork of Version two: Top Athletes

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.

NNikithakatta30
94% match
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
93% match
Loading thumbnail…

Version two: Discipline in top 10 Countries

This interactive visualization shows the top 10 Olympic countries and the distribution of their medals across disciplines. Hovering over a country bar updates a linked pie chart, revealing the medal counts for its dominant sports. Built with D3 v5, it uses SVG rendering and animations via `transition.attrTween` for the pie chart's arc transitions. Data is grouped by country and discipline from an Olympic Games dataset sourced from Kaggle, with all counts based on athletes rather than events.

RRuofan Chen
80% 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
79% 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
77% match
Loading thumbnail…

Bar hover

A bar chart shows total Olympic medals for the top ten countries, using a dataset from the `@akankshapawar1/olympics` package. D3’s `scaleBand` and `scaleLinear` position the bars, while hover interactions change their fill color between black and gray via React state. The chart includes axis labels and uses d3’s `axisLeft` and `axisBottom` for ticks, with a ResizeObserver for responsive sizing.

AAkanksha
76% match