Skip to main content
SimilarExport ZIP
100%

Fork of Simple Scatter Plot

✓ Published0🌍 Public
Wwkj0713@gmail.com
Last edited Jan 25, 2024
Created on Jan 25, 2024

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.

AI-generated description

A simple scatter plot with D3 showing the Penguins Dataset.

Challenge

  • Fork this viz
  • Modify it to show your data
MIT Licensed

Similar vizzes

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

Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes Olympic Games data, mapping Thirdposition on the x-axis and Total on the y-axis, with each circle’s fill color indicating the country (India, Pakistan, or Australia highlighted, others black). Using D3 v6, the code loads CSV data, applies linear scales via `scaleLinear`, and renders SVG circles with `selectAll().join()`. The axes are generated with `axisLeft` and `axisBottom`, while custom labels rotate text for clarity.

Cchandanagandla
78% match
Loading thumbnail…

Fork of Customizing Axes

This bar chart displays Olympic medal counts for the top 10 countries, with orange bars labeled by country and an x-axis showing medal totals in abbreviated format. The data comes from a CSV file loaded via `d3.csv`. The visualization demonstrates axis customization using `d3.axisLeft` and `d3.axisBottom` with `d3.scaleLinear` and `d3.scaleBand`, including custom tick formatting, tick lines in green, and rotated labels. The chart renders in SVG with a red title and axis labels styled through CSS.

Nnagamaheswar
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