Fork of Version two: Top Athletes

100%

Fork of Version two: Top Athletes

✓ Published0🌍 Public

Last edited May 19, 2022

Created on May 19, 2022

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.

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

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

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

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

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

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

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…

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

76% match