Skip to main content
SimilarExport ZIP
100%

Steve's Scatter Plot with Color and Legend

✓ Published1🌍 Public
Bbootshine2
Last edited Oct 9, 2019
Created on Oct 9, 2019

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and sepal width on the y-axis, with each point colored by species. The visualization uses React components to render SVG elements, with d3.scaleLinear for positional axes and d3.scaleOrdinal for categorical coloring. A color legend identifies the three species, and hovering over points reveals tooltips. The chart is built with d3.v5 and React, using axes created from reusable React components.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Steve's Interactive Scatter Plot with Color and Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. Using React and D3 v5, the SVG-based visualization employs `d3.scaleLinear` for both axes and `d3.scaleOrdinal` for species-based coloring. Hovering over the color legend highlights the corresponding species by fading other points to 30% opacity, while native SVG `<title>` elements provide basic tooltips. The chart includes labeled axes and a species legend, with data loaded asynchronously via D3’s `csv` parser.

Bbootshine2
96% match
Loading thumbnail…

Scatter Plot, Slightly Stylized with Color & Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three species of iris flowers. Each data point is rendered as a colored circle in an SVG, with colors assigned by species using a d3.scaleOrdinal color scale. The chart includes custom React components for axes, marks, and a color legend, with d3.linear scales mapping data to pixel coordinates. A tooltip appears on hover, displaying the petal length value.

AAndre J Denais
92% match
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
92% 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
91% match
Loading thumbnail…

Scatter Plot, Color & Interactive Legend

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width, with points colored by species. An interactive legend allows users to hover over species names, highlighting only the corresponding data points and fading the others. The visualization is built with React and rendered as SVG, using d3.scaleLinear for axes and d3.scaleOrdinal for color mapping. Point tooltips display the precise petal length value using d3.format.

AAndre J Denais
91% 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
91% match
Loading thumbnail…

Scatter Plot with Color Legend

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.

DDanier
91% 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
91% match