Skip to main content
SimilarExport ZIP
100%

Scatter plot with interactive color legend

✓ Published0🌍 Public
AAlex Stulov
Last edited Jul 20, 2021
Created on Jul 20, 2021

This interactive scatter plot visualizes the Iris dataset, showing relationships between flower measurements selected via dropdown menus. A color legend on the right highlights points by species, dimming all other data when a species is hovered. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and renders SVG circles with tooltips. The dataset is loaded as CSV and parsed into numeric values for plotting.

AI-generated description

Scatter plot of The Iris Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Interactive Color Legend

This scatter plot visualizes the Iris dataset, showing relationships between four flower measurements with the x and y axes controlled by dropdown menus. The color legend is interactive: hovering over a species option fades non-matching points to 20% opacity while keeping the selected species fully visible. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for species colors, and inline SVG circles for data points. Dropdown components from react-dropdown handle attribute selection for both axes.

MMichael Bruno
96% match
Loading thumbnail…

Scatter plot with color legend

An interactive scatter plot of the Iris Dataset allows users to select which flower measurements to display on the x and y axes via dropdowns. The plot uses D3.js v7 scale functions to map data to SVG coordinates and a color legend to distinguish three iris species. The React code renders the plot declaratively, with custom components for axes, marks, and the legend, using D3’s data loading from a CSV URL.

AAlex Stulov
95% match
Loading thumbnail…

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to compare different flower measurements by selecting X and Y axes from dropdown menus. The chart displays all data points as colored circles representing species, with an interactive color legend that highlights a selected species while fading others. The visualization is built with React and D3 utilities including scaleLinear and scaleOrdinal, rendered as SVG. Hovering over legend items filters the data, making it easy to explore relationships between sepal and petal dimensions across the three iris species.

LLaura Johnson
95% match
Loading thumbnail…

Interactive color legend

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two flower measurements via dropdown menus while colors distinguish species. A custom color legend enables highlighting individual species by hovering, which fades non-matching points to reveal patterns. Built with React and D3 v5, it uses d3.scaleLinear and d3.scaleOrdinal for positioning and coloring, with SVG circles rendered from CSV data loaded via d3.csv.

AAndrea Picciau
95% match
Loading thumbnail…

Scatterplot with Color Legend II

This interactive scatterplot visualizes the Iris flower dataset, allowing users to select which numeric attributes to plot on the x- and y-axes via dropdown menus. It renders circles colored by species using an ordinal color scale, with a legend in the top-right, and includes an SVG title tooltip on each point. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and `csv` to load data, with reusable components for axes, marks, and the legend.

Nnexus1058
95% match
Loading thumbnail…

Scatter Plot with Interactive Legend

This scatter plot visualizes the Iris dataset, letting users select which flower measurements appear on the x- and y-axes via dropdown menus. An interactive color legend highlights individual species on hover by fading non-matching points, using React state to manage selection. The chart is rendered with SVG elements, with scales and axes built using d3.scaleLinear and custom React components for the legends and marks.

SSam Hege
95% match
Loading thumbnail…

Scatter plot with color legends

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two flower measurements via dropdown menus while color-encoding points by species. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for the categorical color scale, and renders SVG circles through React components. The chart includes a custom color legend and axis components, with data loaded asynchronously from a CSV using D3's `csv` parser.

Zzyniax
95% match
Loading thumbnail…

Scatter plot with color legend

This interactive scatter plot of the Iris dataset lets users explore relationships between four flower measurements by selecting which attributes appear on the x- and y-axes via two dropdown menus. Points are colored by species using a color legend built with React components. The visualization uses d3.scaleLinear for positioning, d3.scaleOrdinal for color mapping, and renders axes and marks as SVG elements within a React framework, with data loaded asynchronously via d3.csv.

AAndrea Picciau
94% match