Scatter Plot with Color Legend

100%

Scatter Plot with Color Legend

✓ Published1🌍 Public

Last edited Dec 21, 2021

Created on Dec 9, 2021

A scatter plot of the Iris dataset shows petal length against sepal width, with each of the three iris varieties colored distinctly via an ordinal color scale and a legend. Built with React and D3 v5, it uses `d3.scaleLinear` for the axes and `d3.scaleOrdinal` for colors, rendering SVG circles with hover tooltips formatted via `d3.format`. The chart reads data from a CSV file loaded with `d3.csv`, with axes and legend drawn as reusable React components.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color Legend

A scatter plot of the Iris Dataset displays petal length against sepal width, with points colored by species and a legend identifying each species. Built with React and D3 v5, it uses `scaleLinear` for position, `scaleOrdinal` for color, and renders SVG circles via the `Marks` component. The chart includes custom axes and a color legend, with data loaded asynchronously using `d3.csv` and tooltips provided by SVG `<title>` elements.

DDean Bozic

97% match

Loading thumbnail…

Scatter Plot with Color Legend

A scatter plot of the Iris dataset maps petal length against sepal width, with points colored by species and a legend identifying each category. Built with React and D3 v5, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and SVG circles for marks. Data is loaded via `d3.csv` and parsed into numeric values, while axes and legend are rendered as reusable React components.

JJoe Hutchins

96% match

Loading thumbnail…

Scatter Plot with Color Legend

A scatter plot of the Iris Dataset displays petal length (x-axis) against sepal width (y-axis), with each species represented by a distinct color and a custom legend of colored circles. Built with React and D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and SVG rendering with reusable React components for axes, marks, and the legend. Data is loaded asynchronously via `d3.csv` from the remote iris.csv file.

RRudy Shayganfar

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

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

95% match

Loading thumbnail…

Scatter Plot with Color Legend

This visualization displays the classic Iris dataset as an SVG scatter plot, mapping petal length against sepal width and coloring each point by species. A color legend appears on the right, identifying the three iris species with distinct hues. Built with React and D3 v5, the code uses `scaleLinear` for both axes, `scaleOrdinal` for color mapping, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`, `ColorLegend`) to render ticks, circles, and legend items. Data loads asynchronously via D3's `csv` parser, which also converts numeric fields.

AAdriana Rodriguez Sanabria

95% 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 flowers. A color legend identifies each species with a distinct color, and hovering over a data point displays its value in a tooltip. The visualization is built with React and D3 v5, relying on `scaleLinear` for the axes, `scaleOrdinal` for the color mapping, and `extent` for the data domain. The chart uses SVG rendering with custom components for axes, marks, and the legend.

FFulvio Vigilante

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

95% match