Skip to main content
SimilarExport ZIP
100%

Scatter plot interactions

✓ Published0🌍 Public
AAkanksha
Last edited Feb 14, 2024
Created on Feb 14, 2024

A scatter plot displays the number of participating countries in each Winter Olympic year, using data from a Kaggle dataset covering 1924–2018. Hovering over a point triggers a D3 transition that enlarges the circle radius, providing interactive feedback. The visualization is built with d3-scale for axes, d3-axis for ticks, and custom axis label helpers, all rendered as SVG elements with mouseover and mouseout event handlers.

AI-generated description

Dataset - https://www.kaggle.com/datasets/ramontanoeiro/winter-olympic-medals-1924-2018

Outer circle around the data point on hover

MIT Licensed

Similar vizzes

Loading thumbnail…

Winter Olympics Participants

This interactive scatter plot shows the number of countries participating in the Winter Olympics each year from 1924 to 2018. Each circle represents a medal-winning country at a specific Games, with its vertical position reflecting the total participant count for that year. The visualization uses D3.js scale functions and axis components to render the chart, while the data aggregation logic, which counts unique countries per year via JavaScript Set objects, is embedded in the main module. The dataset originates from Kaggle, and the code relies on the `@curran/axis-labels` library for axis annotation.

AAkanksha
85% match
Loading thumbnail…

Interactive Scatter Plot and Responsive Axes

This interactive scatter plot visualizes Olympic participation, showing the number of participating countries per year. The visualization uses D3.js scales and axes, with a ResizeObserver to detect container dimensions and update the chart responsively. Axis tick density is calculated based on the inner width and height, ensuring consistent spacing across different screen sizes. The code includes a complete modular approach with separate files for axes, labels, and resize observation, featuring animation on circle hover.

AAkanksha
81% match
Loading thumbnail…

Winter Olympics Participants - Iterate

This visualization displays the number of participant countries in each Winter Olympics from 1924 to 2018, with each circle representing a year. The code computes participant counts by aggregating unique country names per year using a JavaScript `Set` within a `reduce` operation. It uses D3.js scales and axes to map years and counts, and renders circles with a fixed radius and reduced opacity to show the trend. Data comes from a Kaggle dataset of Winter Olympic medals.

AAkanksha
76% match
Loading thumbnail…

ICE7 - Scatter Plot

The visualization is an animated scatter plot of Olympic medal data, using D3.js to render colored, elliptical circles that represent countries by their gold, silver, bronze, and total medal counts. It cycles through different x-axis variables on a timer, updating the scales and axes dynamically. The plot uses D3's `csv` loader for data parsing, `scaleLinear` for axes, and custom SVG circles with hardcoded color mappings for USA, China, and Japan within a `setInterval` loop.

Aavinashchinta99
75% 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
74% 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
73% 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
73% 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
72% match