Scatterplot with color and legend

100%

Scatterplot with color and legend

✓ Published1🌍 Public

Last edited Mar 15, 2021

Created on Mar 15, 2021

This interactive scatterplot displays the Iris dataset, with dropdown menus letting users choose which sepal or petal measurements appear on the x- and y-axes. Points are colored by species via a categorical color scale, with a legend showing the three iris varieties. Built with React and D3 v6, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and `csv` to load data from a GitHub gist. SVG rendering handles marks, axes, and legend, while the react-dropdown library provides the selection controls.

AI-generated description

Iris dataset used to display scatter plot. https://gist.githubusercontent.com/surikmeetr/a0165a953a1b5450052bdbc3debdd3fc/raw/0e7a9b0a5d22642a06d3d5b9bcbad9890c8ee534/iris.csv

using https://github.com/fraserxu/react-dropdown

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot with Color Legend

This interactive scatterplot displays the Iris Dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that control the x and y axes. Each point represents an iris flower, colored by species with a corresponding legend. The visualization uses React components and D3 v7 scales (d3.scaleLinear, d3.scaleOrdinal) to render SVG marks and axes from CSV data.

JJun Suzuki

96% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, plotting sepal and petal measurements against each other. Users select X and Y axes from dropdown menus, with points colored by species and a color legend identifying the three categories. The visualization uses D3 v5 scales and axes (scaleLinear, AxisBottom, AxisLeft) within a React framework, rendering SVG circles via the Marks component. Data is loaded asynchronously from a CSV file using d3.csv, with ordinal color encoding via d3.scaleOrdinal and react-dropdown handling user selections.

Ccynichole

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

95% match

Loading thumbnail…

Scatterplot with color legend

This interactive scatterplot displays the Iris flower dataset, plotting sepal and petal measurements with points colored by species via a d3.scaleOrdinal color legend. Users select which attributes appear on the X and Y axes using React dropdown menus. The visualization uses React state to manage selections, d3.csv for data loading, and d3.scaleLinear with extent for axis scaling, rendered as SVG circles with tooltips.

MMarco Malvicini

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

95% match

Loading thumbnail…

Scatterplot with Color Legend

This interactive scatterplot visualizes the Iris flower dataset, letting users explore relationships between sepal and petal measurements via dropdown menus that select the x and y axes. The chart displays points colored by species through a D3 scaleOrdinal color legend. Built with React and D3 v5, it renders as SVG using d3.scaleLinear for axes, d3.extent for domains, and custom React components for axes, marks, and the color legend.

MMark Lam

95% match

Loading thumbnail…

interactive color legend

This interactive scatter plot of the Iris dataset allows users to explore relationships between sepal and petal measurements using dropdown menus to select variables for the x and y axes. The color legend for species is interactive: hovering over a legend item fades all other points to 20% opacity, highlighting the selected species in SVG circles rendered with React. The visualization uses d3-scale for linear and ordinal scales, d3-format to tick labels, and react-dropdown for the axis selectors, with CSV data fetched from a GitHub gist.

Ssurikmeetr

95% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, letting users compare sepal and petal measurements across flower species. Users switch the x and y axes via React Dropdown menus, while three colors distinguish species through a custom color legend. The visualization is built with React and D3 v5, using scaleLinear for axes and scaleOrdinal for color mapping, with SVG circles rendered by a Marks component and data loaded asynchronously via d3.csv.

Aadewole-top

95% match