Polished Scatter Plot with Menus on Indian Olympic Athletes Dataset

100%

Polished Scatter Plot with Menus on Indian Olympic Athletes Dataset

✓ Published0🌍 Public

Last edited Oct 3, 2020

Created on Oct 3, 2020

Forked from Polished Scatter Plot with Menus

This interactive scatter plot explores the attributes of Indian Olympic athletes, allowing users to dynamically select which variables to plot on the X and Y axes from dropdown menus. The visualization displays each athlete as an orange circle, with axis labels updating to reflect the chosen attributes. Built with React and D3.js (v5), the code uses `scaleLinear`, `extent`, and `csv` from D3 for data processing and scaling, while custom React components render the SVG axes and marks. The dataset, sourced from Kaggle and loaded via a GitHub URL, is parsed and converted to numeric values before plotting.

AI-generated description

A scatter plot visualization of Indian Olympic Athletes' attributes which can be chosen from the dropdown menu. Constructed using vega-lite-api.

The Olympic Athletes Performance data (only Indian Athletes) has been used for this visualization. This dataset contains the Indian Athletes' Olympic Performance Records ever since the games began.

Dataset obtained from Kaggle (subset of this dataset).

MIT Licensed

Similar vizzes

Loading thumbnail…

Visualization of India's Olympics Participation in various events by year and season

This visualization maps Indian athletes' Olympic participation across sports and years, with each circle representing an athlete. The x-axis encodes the Olympic year, the y-axis lists the sport, circle size reflects the athlete's age, and color distinguishes between Summer and Winter Games. Hovering reveals the athlete's name. The chart is built using the Vega-Lite API on top of D3, pulling data from a CSV of Indian Olympic athletes originally sourced from Kaggle. Styling is customized via a configuration object that adjusts axis labels and fonts.

VVarun Eranki

77% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot explores the Iris Dataset, with dropdown menus to select which attributes map to the x and y axes. The visualization uses React for the user interface and D3.js for data processing and rendering, with scales created via `d3.scaleLinear`. Each data point is a circle with a tooltip showing its value, and the axes are labeled with the selected attribute names. The code also uses `d3.csv` to load the data and `d3.extent` for domain calculations.

KKeerthiKandadai

77% 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…

Scatter Plot with Menus

A scatter plot displays football player statistics across six attributes (ARG, BRA, ESP, FRA, GER, ITA) from a FIFA dataset. Two dropdown menus let viewers independently select which attribute appears on the x- and y-axes, with react state managing the selection. The code uses d3.scaleLinear for scales, d3.extent for domains, and d3.csv to load data, rendering circles as SVG marks with tooltips via the title element. Axis components generate ticks with tick formatting using d3.format.

NNikithakatta30

77% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to compare any two numerical attributes via React dropdown menus that control the x- and y-axes. The visualization uses React state with the `useState` hook to manage selected attributes and dynamically updates the scales with d3’s `scaleLinear` and `extent`. Rendered as an SVG, the chart includes polished axes built with custom components, tick labels formatted with d3’s `format`, and circular marks that display native tooltips on hover. Data loading is handled asynchronously through d3’s `csv` function.

CChiuyc

76% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two numerical attributes by selecting variables for the X and Y axes from dropdown menus. Built with React and D3.js, the visualization uses `scaleLinear` and `extent` to map data values to SVG coordinates, with custom axis components rendering ticks. The marks are SVG circles with tooltips that show formatted values using D3's `format`. Data is loaded asynchronously via D3's `csv` parser, and the interface updates dynamically when menu selections change.

Llynz09

75% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, featuring dropdown menus to select which measured attribute appears on the x- and y-axes. The visualization updates the axes and data points in response to user selections, with tooltips showing the x-value for each circle. Built with React and D3 v5, the code uses `scaleLinear` for axes, `csv` for data loading, and `ReactDropdown` for the menu controls. The SVG rendering separates axis and mark components, employing D3’s `extent` and `max` for domain calculations.

HHenry-Bayly

75% match

Loading thumbnail…

Polished Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris Dataset, featuring dropdown menus that allow users to dynamically select which attributes to display on the x- and y-axes. The visualization uses React to manage state and render SVG elements, with D3.js (d3.v5) providing the scaling, axis generation, and data formatting utilities. Points are rendered as circles with tooltips, and the chart includes labeled axes and a clean, polished aesthetic. The data is loaded asynchronously from a CSV file using D3's `csv` function within a custom `useData` hook.

AAndrey Katamanov

75% match