Skip to main content
SimilarExport ZIP
100%

D3 Scatter Plot - Olympic Medals Count Dataset - Sitanshu Rupani

✓ Published1🌍 Public
SSitanshu Rupani
Last edited Sep 29, 2021
Created on Sep 15, 2021

This scatter plot shows the relationship between each country’s Summer Rank and Overall Rank in the Olympic Medals Count Dataset. Each circle represents a country, positioned by its summer and overall ranks on linear scales. The visualization is rendered as SVG using D3 v6, which loads the data via `d3.csv` and constructs axes with `scaleLinear`, `axisLeft`, and `axisBottom`. The plot uses a fixed radius for all points and fits the chart to the full browser window dimensions.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot.
This scatterplot shows the relationship between Summer Rank and the Overall Rank of a particular country. Each dot in this viz. represents a country.

Shows the Olympic Medals Count Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

A scatter plot ranks the top ten countries by their all-time Olympic medal counts, with circles positioned along a linear scale for medal totals and a categorical axis for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the SVG chart, with data loaded from a CSV file. Grid lines extend across the plotting area, and the title highlights the dataset's focus on Olympic medal hauls.

Ssriramvsharma
82% match
Loading thumbnail…

Scatter Plot

A scatter plot ranks the top ten countries by their all-time Olympic medal counts, with circles positioned along a linear scale for medal totals and a categorical axis for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to construct the SVG chart, with data loaded from a CSV file. Grid lines extend across the plotting area, and the title highlights the dataset's focus on Olympic medal hauls.

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

ICE-6 Scatter Plot

This animated scatter plot visualizes Olympic medal data for top countries, showing the relationship between total medals and gold, silver, or bronze counts. The visualization cycles through different x-axis variables using a setInterval, dynamically updating the scatter plot and axis labels. Built with D3.js version 6.7.0, it uses SVG rendering with custom color-coded markers for USA, China, and Japan. The implementation leverages D3's csv loader, scaleLinear for axes, and custom circle attributes for elliptical data points.

BBhanuMotupalli
78% match
Loading thumbnail…

India Medals Scattor Plot

A scatterplot displays India's Olympic medal counts across sports, plotting Gold medals on the y-axis and Silver on the x-axis, with Bronze counts encoded by point color. Circles appear sequentially with a staggered delay, animating into place over one second using D3's `.transition()` API. The visualization uses D3 v5's `scaleLinear`, `axisLeft`, and `axisBottom` for axes, rendering as SVG. Data originates from a CSV file listing medal totals per sport, though the title incorrectly references "Cars: Horsepower Vs. Weight," indicating a copy-paste error.

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

D3 Pie Chart - 11641166

This example visualizes the top 10 countries by total medals from the 2020 Summer Olympics dataset. It displays a pie chart with color-coded segments and corresponding medal counts, alongside a legend showing country names, medal values, and color swatches. The visualization uses D3 v7 APIs such as `d3.csv`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `schemeTableau10`. Data is loaded from a remote CSV file, sorted, and rendered as an SVG with interactive mouseover logging.

SSuresh John Wesly
77% match
Loading thumbnail…

ICE6 - Avinash Chinta

This scatter plot visualizes Olympic medal counts by country, using the Data Canvas Sense Your City dataset. The visualization displays each country's total medals on the x-axis against its name on the y-axis, with individual data points rendered as circles. Built with React and D3 v5, the code implements d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, while SVG circles with tooltip titles show precise medal values on hover. The chart includes labeled axes and a distinct teal color scheme for data marks.

Aavinashchinta99
76% match