Scatter Plot with Color Legend

100%

Scatter Plot with Color Legend

✓ Published1🌍 Public

Last edited Apr 21, 2021

Created on Apr 21, 2021

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.

AI-generated description

A scatter plot of The Iris Dataset. Scatter Plot with Menus

MIT Licensed

Similar vizzes

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

97% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four measured attributes (sepal length/width, petal length/width) across three flower species. Dropdown menus dynamically change the x- and y-axis variables, while a color legend distinguishes species using a d3.scaleOrdinal with categorical colors. Built with React and d3.v5, the SVG-based visualization renders axes via custom components, circles with tooltips, and a color legend that updates proportionally to the selected attributes. Data is loaded asynchronously from a CSV file using d3.csv.

SSam Hege

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

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

96% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, showing relationships between four measured attributes (sepal and petal length/width). Users can dynamically select which attributes appear on the x- and y-axes via dropdown menus, while a color legend distinguishes the three iris species. The visualization uses React with D3 v5 scales (d3.scaleLinear, d3.scaleOrdinal) for positioning and coloring, renders marks as SVG circles, and reads the data from a CSV using d3.csv.

RRiccardo De Lucia

96% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Dropdown menus let viewers switch the X and Y axes among four numeric attributes, while a color legend distinguishes species using d3.scaleOrdinal with three categorical colors. The visualization renders as SVG using React components, with d3.scaleLinear handling axis scales and d3.extent computing domains. Marks are drawn as colored circles with tooltips showing values. The data loads asynchronously via d3.csv from a GitHub gist.

MMichael Bruno

96% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to compare sepal and petal measurements across three flower species through dropdown menus for the x and y axes. Each point is colored by species using a d3.scaleOrdinal color scale with an accompanying legend. Built with React and D3 v6, the visualization renders as an SVG and uses d3.scaleLinear for axes, d3.extent for domain calculation, and d3.csv for data loading.

LLaura Johnson

96% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements for three flower species distinguished by color. Users can switch the x- and y-axes between four measurement attributes via dropdown menus. The example uses React with D3 v6 scales and axes, rendering SVG circles and a custom color legend. Data is loaded asynchronously using D3’s `csv` loader and mapped to linear scales with `.nice()` formatting.

PPeter Krevenets

96% match