Skip to main content
SimilarExport ZIP
100%

Reusable Scatter Plot

✓ Published0🌍 Public
MManoj Kolluri
Last edited Jul 7, 2022
Created on Jul 7, 2022
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
88% 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
85% 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
82% match
Loading thumbnail…

Fork of Simple Scatter Plot

This example visualizes Olympic 2021 medal counts, plotting gold medals against total medals for each country. It uses D3 v7, with `scaleLinear` and `extent` to map data, `axisLeft` for the y-axis, and custom `xAxis`/`yAxis` helpers. Circles are rendered with `selectAll().join('circle')`, sized and colored via attributes. The underlying CSV is fetched with `csv()` from D3. A gray `innerRectFill` background and axis labels highlight the correlation between gold and overall performance.

Wwkj0713@gmail.com
81% 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
81% 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
81% 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
80% match
Loading thumbnail…

401 E5

This example visualizes Olympic medal counts for nine countries as a scatterplot, with gold medals mapped to the x-axis and silver medals to the y-axis. Each circle’s radius scales with the square root of the Euclidean distance between the two medal values, while its fill color blends the gold and silver counts into an RGB value. The SVG is built dynamically using D3 version 6’s data join, with `selectAll`, `data`, and `enter` appending circles, and the dataset is hardcoded within the HTML script rather than loaded from an external file.

DDebaliena
80% match