Skip to main content
SimilarExport ZIP
100%

IRIS Scatterplot with Color and Color Legend

✓ Published1🌍 Public
Ppranav-vis
Last edited Sep 14, 2021
Created on Sep 12, 2021

This visualization displays the classic Iris dataset as a scatterplot, mapping petal length on the x-axis and sepal width on the y-axis. Each data point is colored by species using d3.scaleOrdinal, with a custom React-rendered color legend positioned to the right. The SVG is built with React components for axes and marks, using d3.scaleLinear for positioning and d3.extent to compute domains. Axis labels are rotated and styled with CSS. The data loads asynchronously via d3.csv, which parses numeric fields before rendering.

AI-generated description

Rendering CSS named colors from MDN.

MIT Licensed

Similar vizzes

Loading thumbnail…

IRIS Scatterplot with Color

This scatterplot visualizes the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis, with points colored by species using a d3.scaleOrdinal with a custom range. The React-based implementation uses d3.csv to load the data and d3.scaleLinear for axes, rendered as SVG circles with native `<title>` tooltips. Axes are built with custom React components from d3.ticks, and the chart includes labeled axes and a loading message. The color encoding distinguishes the three Iris species, making group patterns visible.

Ppranav-vis
97% match
Loading thumbnail…

Scatter Plot with Color Legend

This visualization displays the classic Iris dataset as an SVG scatter plot, mapping petal length against sepal width and coloring each point by species. A color legend appears on the right, identifying the three iris species with distinct hues. Built with React and D3 v5, the code uses `scaleLinear` for both axes, `scaleOrdinal` for color mapping, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`, `ColorLegend`) to render ticks, circles, and legend items. Data loads asynchronously via D3's `csv` parser, which also converts numeric fields.

AAdriana Rodriguez Sanabria
95% match
Loading thumbnail…

Scatter Plot with Color Legend

A scatter plot of the Iris Dataset displays petal length (x-axis) against sepal width (y-axis), with each species represented by a distinct color and a custom legend of colored circles. Built with React and D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and SVG rendering with reusable React components for axes, marks, and the legend. Data is loaded asynchronously via `d3.csv` from the remote iris.csv file.

RRudy Shayganfar
94% match
Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the classic Iris dataset, displaying petal length against sepal width with each of the three species represented by a distinct color. Using React and D3 v5, the visualization leverages d3.scaleLinear for both axes and d3.scaleOrdinal for the categorical color mapping. The SVG rendering includes custom axis components (AxisBottom, AxisLeft) and circle marks with native tooltips. Data is loaded asynchronously via d3.csv from a remote gist URL.

Ttrissentety
94% 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
94% match
Loading thumbnail…

Scatter_Plot_with_Color_Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for three iris species, with each point colored by species and accompanied by a categorical color legend. The React-based visualization uses d3.scaleLinear for both axes, d3.scaleOrdinal for color mapping, and renders as SVG. The code imports axis components, color legend, and marks, while loading data asynchronously via d3.csv. Interactive tooltips appear on hover through SVG title elements, formatted using d3.format.

Mmartin
94% match
Loading thumbnail…

Scatter Plot with color legend

This scatter plot displays the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis, with species indicated by color and a legend. It uses React for component-based rendering and D3 scales (d3.scaleLinear, d3.scaleOrdinal) to position circles and assign colors. The data is loaded asynchronously via d3.csv, and the visualization is rendered as SVG with custom axis and legend components.

SSushan Prajapati
94% 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
94% match