Version one: Top 20 Athletes

100%

Version one: Top 20 Athletes

✓ Published1🌍 Public

Last edited Nov 17, 2021

Created on Sep 19, 2021

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.

AI-generated description

A barchart uses vega-lite-api.

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 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

93% 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

89% 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

87% 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

81% 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…

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…

Version one: Summer Olympics Gold Medal Count For Selected Country

This interactive line chart displays the Summer Olympics gold medal count for a selected country between 2000 and 2012, highlighting performance trends across four Olympic games. A dropdown menu lets users choose among all countries represented in the dataset, which is sourced from Kaggle’s Olympic Games data. The visualization uses React for the dropdown interface and D3 v5 for rendering SVG paths via `d3.line` and `d3.scaleLinear`. Each line connects four data points, and a `colorLegend` component identifies the current country. The chart updates dynamically on selection change, removing and redrawing axes and lines.

RRuofan Chen

74% match