Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Color Legend

✓ Published1🌍 Public
Ssophburke
Last edited Oct 7, 2019
Created on Oct 1, 2019

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`).

AI-generated description

A scatter plot of The Iris Dataset. Adding a color legend to it.

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 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
97% 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 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 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, mapping petal length and sepal width to the x and y axes. Each point is colored by species using a categorical scale with a legend positioned to the right. The visualization is built with React and rendered as SVG, using D3 scales such as `scaleLinear` and `scaleOrdinal` for positioning and coloring. Axes are drawn with custom React components, and a `title` element provides native tooltips for each circle.

WWolfgang
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

A scatter plot of the Iris Dataset displays petal length against sepal width, with points colored by species and a legend indicating the three categories. The visualization uses React to render SVG elements, with D3 v5 scales (scaleLinear, scaleOrdinal) handling positions and colors, and D3's csv loader fetching the data. Custom React components define the axes, marks, and color legend, while D3’s format function applies tick label formatting.

MMilena Belianovich Holtman
97% match