Scatter Plot with Color Legend

100%

Scatter Plot with Color Legend

✓ Published1🌍 Public

Last edited Jul 16, 2021

Created on Jul 16, 2021

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.

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, showing petal length against sepal width for three iris species. A color legend identifies each species, and hovering over a legend item highlights the corresponding points while fading others. The visualization uses React with D3 v5 for scales and SVG rendering, employing `scaleLinear` for axes, `scaleOrdinal` for colors, and custom React components for axes, marks, and the interactive legend.

EElliot Hill

98% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. A color legend identifies the three species, with each point colored according to its species category. The visualization is built with React and D3 v5, using scaleLinear for the axes, scaleOrdinal for color encoding, and SVG circles for marks. The code includes custom AxisBottom, AxisLeft, and ColorLegend components, with hover tooltips provided by native SVG title elements.

Zzyniax

97% match

Loading thumbnail…

Scatter Plot with Color Legend

This visualization displays the classic Iris dataset, plotting petal length against sepal width for three species of iris flowers. Each point is colored according to its species, with a color legend on the right side identifying the categories. The implementation uses React for component structure and state management, while D3 v7 utilities like `scaleLinear`, `scaleOrdinal`, and `csv` handle data loading, scaling, and coordinate mapping. The SVG rendering includes custom axis and legend components, with hover tooltips showing exact petal length values.

Jjbruzzo

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 for individual flowers. Each data point is a circle colored by species, with a color legend positioned to the right displaying the three species categories. The visualization is rendered as a React component using SVG, with axes and marks generated through custom code that leverages D3 v5 utilities like `scaleLinear`, `scaleOrdinal`, and `extent`. The axes are drawn with reusable `AxisBottom` and `AxisLeft` components, and hovering reveals a tooltip with the formatted x-value.

Jjwlam83

97% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length versus sepal width for individual flowers. A color legend on the right encodes species membership using an ordinal color scale. Built with D3 v5 and React, the visualization uses SVG for rendering. The axes are generated by custom components using D3’s scaleLinear, while the legend and marks are rendered with React components that map data to SVG circles.

CCurran Kelleher

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+color+legend

This chart visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. A color legend maps the three species to distinct colors, with the legend placed to the right of the plot. The visualization is built with React and D3 v5, using `scaleLinear` for axes and `scaleOrdinal` for species colors. SVG circles represent each data point, and the color legend is generated by the `ColorLegend` component with configurable tick spacing. Axis tick labels are formatted using D3's `format` API.

CCyc-Evelyn

97% match