Aesthetic Scatter Plot with Menus

100%

Aesthetic Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Jan 10, 2026

Created on Jan 10, 2026

An interactive scatter plot of the Iris dataset rendered in SVG with React and D3 v7. Dropdown menus allow users to dynamically map any quantitative column to the x-axis, y-axis, or circle size, and any column to color encoding with categorical palettes for species. Points animate into position with staggered transitions and feature custom radial gradients, glow filters, and an interactive tooltip. Clicking a point highlights it and deselects on background click.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, featuring dropdown menus that let viewers select which numerical attributes to display on the x and y axes. The visualization renders data points as SVG circles using React components, with axes generated from D3 scales (scaleLinear) and tick formatting via the format function. Users can compare any combination of sepal and petal measurements, with axis labels updating dynamically to reflect the current selection. The chart loads CSV data asynchronously using D3’s csv parser, and menu interactions update state through React’s useState hook.

Vvesnaj

93% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing viewers to explore relationships between different flower measurements by selecting which attributes to plot on the x- and y-axes via dropdown menus. The SVG rendering uses React to create axis components and circular marks, with D3's `scaleLinear` and `extent` functions managing the data domains. Hovering over a circle reveals a tooltip with its corresponding x-value, implemented through SVG `<title>` elements.

SSai Phaltankar

93% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements appear on the x and y axes via dropdown menus. The plot uses React dropdowns to control the axes, with d3.scaleLinear for positioning and d3.scaleOrdinal for species-based coloring. Hovering over the color legend highlights points of a selected species, using React’s useState to manage the hovered value, while SVG circles render each data point with tooltips.

CCatalina Vajiac

93% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset rendered as an SVG in React, with dropdown menus that let the viewer change which flower measurements appear on the x- and y-axes. The plot uses d3.scaleLinear and d3.extent to map data to pixel coordinates, with custom React components for the axes and marks. Data is loaded as CSV via d3.csv, and each circle includes a native SVG title tooltip.

Wweny1109

93% match

Loading thumbnail…

Scatter Plot with Menus and Colour

This scatter plot of the Iris dataset uses interactive dropdown menus to explore relationships between measurements. Users can select different attributes for the X and Y axes, and the visualization color-codes each point by species using a D3 ordinal scale. Built with React and rendered as SVG, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and custom React components for the dropdowns and marks. The plot includes axis labels and tick formatting via `format('.2s')`, with tooltips showing the x-value on hover.

NNikita Toropov

93% match

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes the Iris Dataset, allowing users to explore relationships between four numeric flower measurements and species through interactive dropdown menus that control which attributes appear on the x and y axes. The visualization uses React to manage state for selected attributes, while D3.js handles the linear scales, axis generation, and data loading via `csv`. The SVG rendering displays circles colored teal, with axis labels updating dynamically based on menu selections.

Wwindwaver

93% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset rendered with SVG, where dropdown menus allow the user to select which attribute maps to the x- and y-axes. The visualization uses React with hooks for state management, D3 scales and axes for positioning, and a custom Dropdown component to update the selected attributes. Circles represent each flower, with a tooltip showing the x-axis value.

PPeter Krevenets

93% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between measurements by selecting which attributes appear on the x- and y-axes via dropdown menus. The visualization uses React with D3 v5 to render SVG circles, with scales and axes built through d3.scaleLinear and d3.axis components. Data is loaded asynchronously from a CSV file using d3.csv, and axis labels update dynamically based on menu selections.

Ccynichole

92% match