Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description

This line chart uses d3 with menu.

Data and Description

It shows the number of gold medals in the Summer Olympics for a particular country from 2000 to 2012. It aims to highlight the changes in the number of gold medals in the Summer 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 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
93% match
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
93% 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
88% 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…

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

ICE-6 Scatter Plot

This scatter plot displays Olympic medal data, comparing each country’s total medals against its bronze medal count. Each circle’s fill color encodes the country (orange for USA, blue for China, green for Japan, black otherwise), while the circle’s `rx` and `ry` attributes visually encode gold and silver medal counts, respectively. Built with React and D3 v6, it loads CSV data, uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` for axes, and renders SVG circles via `select` and `.join`. The plot includes rotated axis labels for silver and gold medals.

BBhanuMotupalli
77% match