Skip to main content
SimilarExport ZIP
100%

Scatter plot with color legends

✓ Published0🌍 Public
Zzyniax
Last edited Apr 12, 2021
Created on Apr 12, 2021

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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 color legend

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.

AAlex Stulov
95% match
Loading thumbnail…

Scatter plot and color legend

This interactive scatter plot of the Iris flower dataset allows users to select which numeric attributes to plot on the x- and y-axes via React dropdown menus. Points are colored by species using a d3.scaleOrdinal with a custom color legend built from SVG circles. The visualization uses React components for axes, marks, and legend, with D3’s scaleLinear and extent for scaling. Data is loaded asynchronously from a CSV file using d3.csv.

EElliot Hill
94% 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
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
94% match
Loading thumbnail…

Scatterplot with Color Legend Interactive

This interactive scatterplot displays the Iris flower dataset, allowing the user to select which attributes are mapped to the x- and y-axes via two dropdown menus. A color legend on the right encodes the flower species, and hovering over a legend entry dims points from other species while highlighting the matching ones. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and custom React components for axes and marks, rendering to SVG from parsed CSV data.

MMark Lam
94% 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
94% match
Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to compare any two measured attributes. Positioned on the x- and y-axes are dropdown-selected variables, while color encodes the flower species. The visualization uses React for the interface and D3 v7’s `scaleLinear`, `scaleOrdinal`, `csv`, and `extent` to load and map data to SVG circles. Hovering over a point reveals its exact value via a native tooltip. A color legend with categorical swatches clarifies the species mapping.

KKazushige Okuma
94% match