Skip to main content
SimilarExport ZIP
100%

Polished Scatter Plot with Menus

✓ Published0🌍 Public
Llzb1003
Last edited Dec 17, 2020
Created on Dec 17, 2020

Two dropdown menus control which numeric attributes of the wine quality dataset are plotted on the x- and y-axes. The scatter plot uses React for the interface, with d3.scaleLinear for axes, d3.extent for domains, and SVG circles for marks. Each circle includes a native `<title>` tooltip, while the menus are built with ReactDropdown. The data loads asynchronously via d3.csv.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Polished Scatter Plot with Menus

A polished scatter plot of the Iris dataset with interactive dropdown menus for selecting the X and Y axes. The visualization uses React to manage state for the selected attributes and d3.scaleLinear to map data values to pixel positions, with custom SVG components for the axes and marks. The ReactDropdown library provides the menu interface, while D3's csv parser loads the data and applies type coercion to numeric fields. The plot features formatted axis ticks and tooltips via SVG title elements.

Rroc286
86% match
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot uses the classic Iris Dataset, rendered as an SVG in React, to explore relationships between four numeric measurements. Menus built with React-Dropdown let users dynamically select which attributes map to the x and y axes, while d3.scaleLinear and d3.extent compute the scales for each new selection. Axis components and data marks are custom React components that use D3 for tick generation, and a `<title>` element provides a tooltip. The chart deliberately sets `height` shorter than the container to reserve space for the dropdown controls.

Ee-ines
86% match
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot displays movie ratings and attributes from a Movies Dataset, allowing users to explore relationships between continuous variables. Two dropdown menus let viewers select which attributes appear on the x- and y-axes, with the chart updating dynamically. The visualization uses React for state management and rendering, D3 v5 scaleLinear for axis scaling, and ReactDropdown for the menu controls. Data loads asynchronously via d3.csv, and circles render in SVG with built-in tooltips showing tick-formatted values on hover.

VVamsi Bhargav Sukamanchi
86% match
Loading thumbnail…

Scatter Plot with Menus on Wine Recognition Dataset

This scatter plot from the Wine Recognition dataset lets users explore relationships between 13 chemical attributes of three wine varieties. Dropdown menus select which attributes appear on the x- and y-axes, while a fixed color encoding distinguishes the wine classes. Built with React and D3 v5, the SVG visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and renders circles with tooltips that display the wine type and coordinate values. The data is loaded as CSV via `d3.csv`.

Llintonylin
85% match
Loading thumbnail…

Polished Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris Dataset, allowing users to dynamically select which four numerical attributes to plot on the x- and y-axes via two dropdown menus built with ReactDropdown. The visualization updates the axes and data points in real time based on the chosen attributes. The chart is rendered using SVG within a React framework, with axes generated by custom React components using d3.scaleLinear for scales and d3.extent for domains. Data loading relies on d3.csv, and hover tooltips display formatted values via native SVG title elements.

DDeborah Ong
85% match
Loading thumbnail…

Polished Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris dataset, letting users compare how different flower measurements correlate by selecting any two attributes from dropdown menus for the x and y axes. Built with React, D3 v5 scales, and SVG, it renders circles with tooltips and formatted axis ticks. The menus use the react-dropdown library, while data is loaded as CSV and parsed with d3.csv.

Yyuzhang21
85% match
Loading thumbnail…

Polished Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris dataset, letting users compare how different flower measurements correlate by selecting any two attributes from dropdown menus for the x and y axes. Built with React, D3 v5 scales, and SVG, it renders circles with tooltips and formatted axis ticks. The menus use the react-dropdown library, while data is loaded as CSV and parsed with d3.csv.

Yyuzhang21
85% 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
85% match