Version one: Summer Olympics Gold Medal Count For Selected Country

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.

93% match

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.

91% match

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.

90% match

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

80% match

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

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.

Line Chart with Country Dropdown

This line chart displays a country's total medal count each year, with a dropdown menu to switch between countries. The visualization initially draws a line for the selected country, filtering the yearly data accordingly. The chart is built using D3.js, specifically `select`, `scalePoint`, `scaleLinear`, and `line`, along with the `responsive-axes` library for layout. The SVG is rendered directly to the container, and the dropdown listens for a `change` event to trigger a redraw with a filtered dataset.

AAkanksha

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