Version three: 2012 medal count versus log(GDP)

100%

Version three: 2012 medal count versus log(GDP)

✓ Published0🌍 Public

Last edited Nov 18, 2021

Created on Nov 16, 2021

Forked from Version two: 2012 medal count versus log(GDP)

This scatter plot displays the relationship between a country's logged total GDP and its 2012 Summer Olympic medal count, revealing a positive linear trend where wealthier nations tend to win more medals. Each red circle’s size encodes the country’s 2015 population, with hover tooltips showing country names. The visualization is built with vega-lite-api, vega-lite, and vega-tooltip, using D3’s csv parser to load and transform data from a public GitHub gist. Data is aggregated by athlete, not event, and GDP is calculated by multiplying the 2015 population by per-capita GDP.

AI-generated description

This is a scatter plot using vega-lite-api.

Iterate: the size of points (circles) reflects the population size (as the population affects the number of medals of a country).

the color of the points changes from blue to red, since the circle size depends on population size now, some countries circle radius is small, red makes the points pop out more.

Data and Description

This scatter plot describes 2012 summer olympic games medal count by country and the logarithm of country's GDP(2015 estimated). x-axis is log(total GDP) y-axis is the number of medals. This is a marked scatter plot. When the mouse is hovering over the point, the country name will be displayed There is a linear relationship between GDP and the number of medals. As GDP increases, the country tends to win more medals at the summer Olympics.
The data shown here comes from the Olympic info data. This data is an aggregate of Olympic data from 2000 to 2014, which is extracted from kaggle.

Note

All counts are based on athletes, not events. For example, if a country wins the swimming 4X100M freestyle relay, the number of athletes who have won medals for that event is 4. The goal is to measure how many athletes performed well in the Olympics, participated in various events, and won medals in the events.

MIT Licensed

Similar vizzes

Loading thumbnail…

Version two: 2012 medal count versus log(GDP)

This scatter plot shows the relationship between a country’s total GDP (on a logarithmic scale) and its 2012 Summer Olympics medal count, revealing a positive linear trend. Hovering over a point displays the country’s name via the vega-tooltip handler. The visualization uses the vega-lite-api with a circle mark, encoding GDP and medal frequency as quantitative fields. Data is loaded from a CSV using d3.csv, with the GDP computed from population and per-capita GDP before applying a natural logarithm. The chart is rendered in D3 v5 with Vega-Lite.

RRuofan Chen

95% match

Loading thumbnail…

Version one: 2012 medal count versus GDP

This scatter plot shows 2012 Summer Olympics medal counts versus each country’s total GDP, revealing a positive linear relationship. Hovering over a circle displays the country name via a tooltip. The visualization is built using the Vega-Lite API, with data parsed from a CSV using D3’s `csv` method and GDP calculated by multiplying population by per-capita GDP. The data originates from Guardian Olympic data on Kaggle, aggregated to count medal-winning athletes rather than events.

RRuofan Chen

93% match

Loading thumbnail…

Version three - part 1: Summer Olympics Gold Medal Count For Selected Country

A line chart displays the gold medal count for each Summer Olympics from 2000 to 2012 for a user-selected country. Five colored lines, each with circular markers per year, trace the performance of five countries simultaneously. The visualization uses React with D3 v5 APIs including `nest`, `scaleLinear`, `line`, and `axisBottom`; a dropdown menu triggers an `updateLine` function that redraws the chart with filtered data. Data originates from a Kaggle dataset hosted as a GitHub gist, with counts based on individual athletes rather than events.

RRuofan Chen

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

74% match

Loading thumbnail…

Version two: Gold Medal by Country

This interactive line chart displays the number of gold medals won by a selected country in the Summer and Winter Olympics from 2000 to 2014, with the data sourced from Kaggle. Using D3 v4, the visualization renders two lines per country—one for each season—which can be highlighted in red via a dropdown menu. A second dropdown allows users to switch between countries, with the y-axis dynamically rescaling to accommodate each nation’s medal totals. The SVG paths are generated with `d3.line` and animated transitions update the chart.

RRuofan Chen

74% match

Loading thumbnail…

medal-rank

This visualization uses Olympic medal data from 1896 onward to show how country rankings shift depending on how heavily gold medals are weighted versus silver and bronze. Each country displays a grid of 2D heatmaps, where the x-axis varies the silver-to-bronze weight and the y-axis varies the gold-to-silver weight. D3.js renders each cell as a colored rectangle whose hue maps to the country’s average rank under that scoring scheme, sorted by best possible ranking. The animation and tooltip use D3 selections and SVG.

11wheel

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

73% match

Loading thumbnail…

401 E5

This example visualizes Olympic medal counts for nine countries as a scatterplot, with gold medals mapped to the x-axis and silver medals to the y-axis. Each circle’s radius scales with the square root of the Euclidean distance between the two medal values, while its fill color blends the gold and silver counts into an RGB value. The SVG is built dynamically using D3 version 6’s data join, with `selectAll`, `data`, and `enter` appending circles, and the dataset is hardcoded within the HTML script rather than loaded from an external file.

DDebaliena

73% match