Skip to main content
SimilarExport ZIP
100%

Iris Dataset Scatter Plots with Color Legend

✓ Published0🌍 Public
Sstephanie0215
Last edited Sep 28, 2022
Created on Sep 24, 2022
Forked from Scatter Plots

This visualization displays the Iris dataset as a scatter plot of petal length versus petal width, with each of the three flower species (setosa, versicolor, virginica) distinguished by a distinct color from a D3 ordinal scale. Using D3 v7, the code loads CSV data, scales the x and y axes with `scaleLinear`, and renders circles as data points. Axes are generated with `axisBottom` and `axisLeft`, and the SVG output includes a color legend that maps class labels to specific hex color values.

AI-generated description

T

MIT Licensed

Similar vizzes

Loading thumbnail…

Iris Scatter Plot

This scatter plot displays the classic Iris dataset, with each point representing a flower and colored by its species (setosa, versicolor, or virginica). The visualization uses D3 v5 to render an SVG, allowing users to dynamically select which measurements (sepal or petal length/width) appear on the x- and y-axes via dropdown menus. The code builds linear scales with `d3.scaleLinear`, generates axes with `d3.axisBottom` and `d3.axisLeft`, and adds a color legend using `d3.legendColor`. Circles are styled with an ordinal color scale, and grid lines are rendered through tick sizes.

Wwinniepooh520
92% match
Loading thumbnail…

scatter-plot-color-legend

This scatter plot visualizes the Iris Dataset, showing the relationship between petal length and petal width. Circles represent individual flowers, colored by species using a categorical color scale (d3.scaleOrdinal with schemeCategory10). A legend highlights a species on hover by dimming other categories, with axis labels and tick marks rendered via d3.axisLeft and d3.axisBottom. The visualization loads data from a CSV file using d3.csvParse and updates reactively through a state management pattern with setState.

Oownerofthesoul0000@gmail.com
92% match
Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis, with each of the three species distinguished by color. The visualization uses D3 v7's scaleLinear for positioning, scaleOrdinal for categorical coloring, and the axisBottom and axisLeft components to create labeled axes. A separate color legend, built with custom SVG elements, maps each species to a specific color using a switch statement. Data is loaded from a local CSV file and parsed with d3.csvParse before being rendered as circular marks.

Ffloraho401
92% match
Loading thumbnail…

Stylized Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, displaying clusters of iris flowers by petal length against sepal length, with color distinguishing species. Each circle represents a flower, and a color legend identifies the three species. Built with D3 v5, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and `d3.axisBottom`/`d3.axisLeft` for ticks. The `d3.legendColor` plugin renders the circular legend, while CSV data is loaded via `d3.csv` and rendered as SVG circles with opacity.

CCurran Kelleher
92% match
Loading thumbnail…

Scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length against petal width for 150 flowers. Each point is colored according to its species (setosa, versicolor, or virginica), revealing clear species clusters. A legend identifies the color mapping. The visualization is built with D3 v5, using `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and `axisBottom` and `axisLeft` for tick marks. Data is loaded from a local CSV via `csv()`, and the chart is rendered as an SVG.

HHalvorte
92% match
Loading thumbnail…

Iris Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width to the x- and y-axes while coloring each point by species (setosa, versicolor, or virginica) using orange, green, and purple. The SVG rendering is built with D3 v6, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct scales and axes. Data is loaded asynchronously via `d3.csv`, with numeric fields parsed on input, and the chart includes custom axis labels and a title.

AAnanyaSamala
92% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal length for individual flowers. Each circle represents one iris, colored by its species to reveal clustering patterns. The D3.js code uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color mapping. Axis labels and a color legend are rendered using SVG elements and the d3-legend library’s `legendColor` component.

Nnithish-1999
92% match
Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the iris dataset, showing sepal length against sepal width for three flower species, with each species colored distinctly via a custom color legend. The visualization uses D3 v5 to load CSV data and build an SVG scene, employing `scaleLinear` for the axes, `scaleOrdinal` for color encoding, and `axisBottom`/`axisLeft` to render gridlines. Semi-transparent circles reveal overlapping points, while a reusable `colorLegend` module generates a categorical legend with labeled circles and a background rectangle.

YYunLing
92% match