Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
RRuofan Chen
Last edited Nov 24, 2021
Created on Nov 23, 2021

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.

AI-generated description

This line chart uses d3 with menu.

Data and Description

It shows the number of gold medals in the Winter Olympics for a particular country from 2002 to 2014. It aims to highlight the changes in the number of gold medals in the Winter Olympics in various countries. The data is collected by olympic data. This line refers to the trend of the number of gold medals. The user can use the menu to select the country. The data 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 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
93% 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
91% 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
91% 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
78% 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…

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

Reusable Scatter Plot

This interactive scatter plot visualizes Olympic medal data, mapping bronze medal counts against total medals while using circle size and color to indicate gold and silver medal tallies for the USA, China, and Japan. Built with React and D3, the visualization uses an animated `setInterval` to rotate through different x-axis columns, including total, silver, and bronze medals. The code leverages D3's `csv` loader, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to render SVG circles and axes, with a custom legend and country-based color coding.

MManoj Kolluri
76% match
Loading thumbnail…

Vertical Bar chart

A vertical bar chart displays the top five countries by total Olympic gold medals from 1896 to 2018, sourced from Wikipedia via a CSV file. Using React and D3 v6, the visualization renders SVG rectangles with scales from `scaleBand` and `scaleLinear`. Custom axis components generate tick labels and grid lines, while the data is loaded asynchronously and sorted in `useData`.

Kkragovic
76% match