Scatter Plot with Color Legend

100%

Scatter Plot with Color Legend

✓ Published0🌍 Public

Last edited Jan 4, 2020

Created on Jan 4, 2020

Forked from Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing how sepal and petal measurements vary across three flower species. The visualization uses d3.scaleLinear for positioning, d3.scaleOrdinal with schemeCategory10 for color encoding, and React components to structure the SVG rendering. Each circle represents a flower sample, with color indicating species and a color legend displaying the categorical mapping. The axes are generated using d3.axisBottom and d3.axisLeft, while circle elements include tooltip titles for hover details.

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, 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 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

96% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, enabling users to explore relationships between sepal and petal measurements across three species. The visualization uses d3.scaleLinear for x and y positioning, d3.scaleOrdinal for color encoding by species, and renders marks as SVG circles. React state management updates dropdown selections for axes, while d3.csv loads the external dataset. A color legend using d3.scaleOrdinal domain values identifies species, with axes built through custom React components.

Ee-ines

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

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

96% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width with a color legend for species. The d3.v7 scales (scaleLinear, scaleOrdinal) position circles within an SVG rendered via React. Axis components handle tick generation, while d3.csv loads and parses the data. A color scale assigns distinct hues to the three iris species, with a legend generated from the color domain.

BBen Seebeck

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

96% match

Loading thumbnail…

Scatterplot with Color Legend

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which numerical attribute appears on each axis, while the color legend identifies species using d3.scaleOrdinal. The visualization is built with React components, using d3.scaleLinear for both axes, d3.extent for domain calculation, and d3.csv for data loading. The SVG rendering includes separate AxisBottom, AxisLeft, ColorLegend, and Marks components, with native browser tooltips on each circle showing formatted values.

Aalexandermodell

96% match