Scatter plot with Color Legend

100%

Scatter plot with Color Legend

✓ Published0🌍 Public

Last edited Oct 7, 2021

Created on Oct 6, 2021

This visualization displays the Iris dataset as a scatter plot, using color to distinguish between the three iris species. The user can select different measurement attributes for the X and Y axes from dropdown menus. A color legend allows hovering to highlight data points belonging to a specific species. Built with React and D3.js (v5), the visualization uses SVG rendering, `scaleLinear` and `scaleOrdinal` for scaling, and custom components for axes, marks, and the interactive legend.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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 Colors Legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements along the x- and y-axes while using color to distinguish species. Users can select which attributes to plot from dropdown menus. The visualization uses React with D3’s `scaleLinear` for axes, `scaleOrdinal` for color encoding, and renders SVG circles with tooltips. A color legend maps species to distinct colors, with axis labels and tick marks generated by custom React components.

Kkragovic

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…

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

94% match

Loading thumbnail…

Scatter Plot Iris with Color Legend

An interactive scatter plot of the Iris dataset with dropdown menus to select the x and y axes shows the relationship between sepal and petal measurements. The visualization uses React for the UI, d3.v7's scaleLinear, scaleOrdinal, and extent for scales, and renders as SVG with color-coded circles representing species. A color legend identifies the three Iris species, while axis labels and dropdown selectors update dynamically as users change the plotted attributes.

EEFezerKW

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

93% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between four measurements (sepal and petal length/width) through dropdown menus that control the x and y axes. Points are colored by species using a d3.scaleOrdinal with a corresponding legend showing the three Iris varieties. The visualization is built with React and D3 v6, rendering SVG circles and axes through custom components like AxisBottom, AxisLeft, and Marks, with data loaded via d3.csv from a remote gist.

CCodeDuckie99

93% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for three iris species. A color legend identifies each species, and hovering over a legend item highlights the corresponding points while fading others. The visualization uses React with D3 v5 for scales and SVG rendering, employing `scaleLinear` for axes, `scaleOrdinal` for colors, and custom React components for axes, marks, and the interactive legend.

EElliot Hill

93% match