Scatter Plot with Color Legend

100%

Scatter Plot with Color Legend

✓ Published1🌍 Public

Last edited Oct 25, 2021

Created on Oct 24, 2021

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.

AI-generated description

Scatter plot of Iris Data Set

MIT Licensed

Similar vizzes

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

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…

Scatter Plot with Colour Legend

This interactive scatter plot displays the Iris flower dataset, letting users compare any two measured attributes (sepal length, sepal width, petal length, petal width) by selecting them from dropdown menus. The species of each flower is encoded through color and shown in a separate legend. Built with React and D3 v7, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for the categorical color mapping, and renders all marks and axes as SVG elements. The data is loaded asynchronously from a CSV file using D3’s `csv` function.

KKevin McMorrow

94% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between different measurements (sepal length, sepal width, petal length, petal width) by selecting attributes for the x and y axes via React dropdown menus. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color encoding of species, and renders circles as SVG marks. React state management tracks the selected attributes, while d3.csv loads the data and d3.format formats axis tick labels, with a color legend indicating species.

CChristian Potdevin

94% 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

94% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot displays measurements from the Iris Dataset, letting users compare four flower attributes (sepal and petal length/width) by selecting which to plot on the X and Y axes. Each point is colored by iris species, with a color legend identifying the three varieties. The visualization is built with React and uses D3’s `scaleLinear`, `scaleOrdinal`, and `extent` functions to map data to positions and colors, rendering circles as SVG elements. Dropdown menus control the axis selections, while D3’s `csv` loads the data asynchronously.

MMario Ibarra

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, 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

94% match