Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Color Legend

✓ Published1🌍 Public
DDanier
Last edited Sep 22, 2021
Created on Sep 22, 2021

This scatter plot visualizes the Iris dataset, mapping petal length and sepal width on the x and y axes, with each point colored by species. A color legend identifies the three species categories. Built with React and D3 v5, the visualization uses d3.scaleLinear for coordinate mapping and d3.scaleOrdinal for species colors, rendering SVG circles via React components. Data is loaded asynchronously using d3.csv from a GitHub gist, with axes and labels generated through custom React components.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, plotting petal length against sepal width with each point colored by species. The visualization uses D3 v6's scaleLinear and scaleOrdinal to map quantitative and categorical data, while React components render SVG axes, circles, and a color legend. The color legend displays distinct species categories, and hovering over points reveals their petal length values. Data is loaded via d3.csv from a remote URL, and the entire chart adapts to the browser window size.

BbeauMarko
97% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing the relationship between petal length and sepal width for different iris species. Each data point is rendered as a circle using SVG, with color encoding species membership through a categorical color scale. The visualization includes axes, axis labels, and an interactive color legend that logs species names on hover. Built with React and D3 v5, it uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading.

Wwenleicao
97% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width, with points colored by species and a legend identifying the three categories. Using React with D3 v5, the visualization employs `scaleLinear` for the axes, `scaleOrdinal` for the color mapping, and renders SVG elements through reusable components like `AxisBottom`, `AxisLeft`, `ColorLegend`, and `Marks`. The data is loaded asynchronously via `csv`, with numeric columns parsed for plotting.

Wwinniepooh520
97% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and sepal width on the y-axis. Each of the 150 data points is colored by species using a categorical ordinal scale, with a custom color legend placed to the right. Built with React and D3 v6, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading. The SVG rendering includes custom React components for axes, marks, and the legend, with tooltips showing formatted petal length values.

TTaweewat Somboonpanyakul
97% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three species of iris. The species are encoded by color using a categorical scale mapped to an ordinal color legend. Built with React and D3 v5, the visualization uses `scaleLinear` for the axes, `scaleOrdinal` for colors, and reactive rendering via the `useData` hook to load CSV data. SVG circles represent each data point, with axes and legend components rendered separately.

Wwindwaver
97% match
Loading thumbnail…

Scatter Plot With Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width with points colored by species. Built with React and D3 v5, the visualization uses `scaleLinear` to map data coordinates to SVG positions and `scaleOrdinal` to assign species colors. The SVG rendering includes custom axes, a color legend, and circle marks that display tooltips with formatted values on hover.

KKolezhannochka
97% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length on the x-axis and sepal width on the y-axis, with each of the three iris species represented by a distinct color. The visualization uses D3.js scaling functions (`d3.scaleLinear`, `d3.scaleOrdinal`) within a React framework, rendering circles as SVG marks. A color legend provides species identification, with axes and labels formatted and styled through custom React components (`AxisBottom`, `AxisLeft`, `Marks`, `ColorLegend`).

Ssophburke
97% match
Loading thumbnail…

Scatter Plot with Color with Color Legend

This interactive scatter plot visualizes the Iris dataset, showing sepal width against petal length for different Iris species. Data points are rendered as circles with colors mapped to each species, accompanied by a legend that identifies the color-to-species correspondence. Built with React and D3.v5 utilities including `scaleLinear`, `scaleOrdinal`, and `extent`, the visualization uses SVG for rendering. The color legend communicates the species mapping, while tooltips display the petal length value for each point.

Yyejichun@naver.com
97% match