Version two: Gold Medal by Country

100%

Version two: Gold Medal by Country

✓ Published1🌍 Public

Last edited Nov 17, 2021

Created on Nov 9, 2021

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.

AI-generated description

This line chart uses d3 with menu.

Data and Description

It shows the number of gold medals in the Olympics for a particular country from 2000 to 2014. It aims to highlight the changes in the number of gold medals in the Olympics in various countries. The data is collected by olympic data. The lines refer to the trend of the number of gold medals. There are two lines on the plot. One is the summer medal count, the other is the winter medal count. The user can use the menu to select the country. The season menu can be selected to see the highlighted line in red.

The data is extracted from kaggle.

MIT Licensed

Similar vizzes

Loading thumbnail…

Version three - part 2: Winter Olympics Gold Medal Count For Selected Country

This interactive line chart displays the Winter Olympic gold medal counts for a selected country between 2002 and 2014, highlighting performance trends across four games. A dropdown menu lets users choose a country, updating the visualization to show that nation’s medal trajectory. Built with React and D3 v5, the chart uses `d3.line`, `d3.scaleLinear`, and `d3.nest` to render SVG paths and circles, with data sourced from a Kaggle dataset on Olympic games.

RRuofan Chen

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

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

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

79% match

Loading thumbnail…

Fork of Line Chart with Country Dropdown

This interactive line chart visualizes Olympic medal counts over time for a selected country. A dropdown menu populated with unique countries from the dataset lets users filter the view, displaying a single line for the chosen nation. The visualization uses D3.js (v7) APIs including `scalePoint`, `scaleLinear`, `scaleOrdinal`, `line`, and `flatGroup` to map years and medal totals, with `observeResize` from `@curran/responsive-axes` managing responsive dimensions. The chart renders an SVG with axes, gridlines, and a colored line, updating dynamically on selection changes.

Ccoreyfnolan@gmail.com

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

77% match

Loading thumbnail…

Choropleth Map

An interactive choropleth map shades countries by the average number of Olympic medals won, with a dropdown menu to switch between gold, silver, and bronze. D3 v6 drives the visualization, using `d3.geoMercator` and `d3.geoPath` to project GeoJSON country boundaries, while `d3.scaleThreshold` maps medal counts to color scales like `d3.schemeOranges`. Hovering highlights a country and displays a tooltip with its name and medal total. Data comes from a CSV of Olympic medal summaries, rendered as SVG with animated opacity transitions.

AAniketShahane

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

77% match