Skip to main content
SimilarExport ZIP
100%

Iris Dataset Scatter Plot

✓ Published0🌍 Public
TTejaswi@3271
Last edited Mar 6, 2022
Created on Mar 6, 2022
Forked from HTML Starter

This scatter plot visualizes the Iris dataset, plotting petal length against sepal length for three iris species, each encoded with a distinct color. The visualization is rendered as an SVG using React and D3 v6. It loads the data from a CSV file with d3.csv, parses numeric fields, and applies d3.scaleLinear for the x and y axes, with d3.axisLeft and d3.axisBottom for ticks. Circles are created with D3’s data join, and the chart fills the full window size.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris dataset, comparing petal length against sepal length, with each point colored by species (Iris-setosa in blue, Iris-versicolor in red, and Iris-virginica in black). The visualization uses d3.csv to load and parse the data, then applies d3.scaleLinear and extent to map values to pixel coordinates, drawing circles with SVG. Axes are rendered with d3.axisLeft and d3.axisBottom, and labeled text is added via SVG elements. The plot is displayed full-screen in an HTML page using D3 v6.

Ddivyageethanjali
95% match
Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Each circle is colored by species—blue for setosa, yellow for versicolor, and red for virginica—with the D3 v6 scaleLinear and extent functions defining the axes. The SVG is rendered full-window, using D3’s csv loader, axisLeft, axisBottom, and join for circles, while custom axis labels are styled with times font.

Ssumitradevipolina
95% match
Loading thumbnail…

Iris Dataset Scatterplot

This scatterplot visualizes the Iris Dataset, plotting petal length against sepal width for 150 flower samples. The visualization displays data points as circles with a teal fill, using linear scales created with d3.scaleLinear and extent to map the data to SVG coordinates. React components structure the axis and mark rendering, while d3.csv loads and parses the remote dataset, converting numeric fields with unary plus operators. The code includes custom axis components that generate tick marks and labels, and a marks component that renders circles with native SVG title tooltips.

LLaura Johnson
95% match
Loading thumbnail…

Iris Scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis, with each of the 150 flowers represented as a circle. The React-driven SVG uses D3 v7 scales, including `scaleLinear` and `extent`, to map data values to pixel coordinates. Axis components generate tick marks and labels via `xScale.ticks()`, while formatted tooltips appear on hover through SVG `<title>` elements. Data is loaded asynchronously with `d3.csv` from a remote gist, and the layout employs explicit margins for axis labels.

Ssaidhiraj16
95% match
Loading thumbnail…

Iris Dataset Scatter Plot

This interactive scatter plot visualizes the Iris dataset, plotting petal length against petal width for individual flowers. Data points are color-coded by species—blue for setosa, red for versicolor, and black for virginica—allowing immediate comparison of species clusters. The visualization loads CSV data using d3.csv, and employs d3.scaleLinear and d3.extent to map the data to screen coordinates, with d3.axisLeft and d3.axisBottom rendering labeled axes. Circles are drawn as SVG elements with d3.selectAll and .join, while the chart also encodes sepal measurements as additional attributes (rx, ry) on each marker.

Ppravalliyaram
95% match
Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis as red circles. The axes are rendered using d3.axisLeft and d3.axisBottom, while d3.scaleLinear and d3.extent compute the scales from the CSV data loaded via d3.csv. The SVG canvas fills the viewport, with fixed margins and labeled axes added as text elements.

Uubl2
94% match
Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris dataset, plotting petal length against petal width for individual flowers, with points colored by species (brown for setosa, orange for versicolor, red for virginica). The visualization uses D3.js v6, employing `scaleLinear` and `extent` to map data ranges to screen coordinates, and renders circles as SVG marks via `selectAll` and `join`. Axes are generated with `axisLeft` and `axisBottom`, while the data is loaded asynchronously from a CSV URL using D3’s `csv` function.

SSyed Araib Karim
94% match
Loading thumbnail…

Iris Data Scatter Plot

This visualization shows the Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal width on the y-axis. Each circle represents an individual iris flower, with a tooltip displaying the exact x-value on hover. The chart uses React state via `useState` and `useEffect` to load the CSV data through d3.csv, while d3.scaleLinear and d3.extent compute the scales. Axes are rendered as custom React components using SVG, with d3.format for tick labels and the Poppins font from Google Fonts.

Kkbrookshire420
94% match