IC6 Iris Dataset Scatter Plot

100%

IC6 Iris Dataset Scatter Plot

✓ Published2🌍 Public

Last edited Jun 26, 2022

Created on Jun 25, 2022

This scatter plot visualizes the classic Iris dataset, showing petal length against sepal length. Each point is colored by species (setosa, versicolor, virginica) to reveal clustering patterns in flower measurements. The visualization demonstrates a clean React and D3 integration, using d3.scaleLinear for axis scaling, d3.axisLeft and d3.axisBottom for tick marks, and a d3.selection join to render SVG circles. Data loads asynchronously via d3.csv into the React state, with layout dimensions derived from the window size.

AI-generated description

This viz is a starter that demonstrates patterns used in real world projects in which complexity is anticipated to scale.

Decoupled React & D3 integration
Opening moves for scalable complexity
Industry standard ES modules and JSX
Copy-paste into existing projects

Any questions? Ask on Twitter!

Also viewable in:

MIT Licensed

Similar vizzes

Loading thumbnail…

IC6 Iris Dataset Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis, with points colored by species (setosa in blue, versicolor in red, and virginica in black). The visualization uses D3.js v6, loading data via `d3.csv` and scales with `scaleLinear`, `extent`, and `axisBottom`/`axisLeft`. The SVG rendering includes circles with fixed radius, axis labels, and margin-based layout. The code explicitly parses numeric fields and retrieves data from a GitHub gist, showing a straightforward scatter plot with categorical color encoding.

TTharun2022

95% match

Loading thumbnail…

Iris Dataset Scatter Plot

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.

TTejaswi@3271

93% 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

93% 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

93% 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

93% match

Loading thumbnail…

Fork of IC6 Iris Dataset Scatter Plot

This scatter plot visualizes the classic Iris dataset, showing the relationship between sepal length and petal length across three species of iris flowers. Each species is color-coded—blue for setosa, red for versicolor, and black for virginica—using SVG circles rendered with D3’s `scaleLinear` and `extent` functions. The visualization is built with React and D3 v6, using a decoupled architecture where `VizWrapper` manages the SVG container and the `viz` function handles the rendering, including axes generated with `axisLeft` and `axisBottom`.

VVenkata Sai Preetham

92% match

Loading thumbnail…

Iris Dataset Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length to the x-axis and petal width to the y-axis. Each circle represents an individual flower, with color indicating species: black for setosa, green for versicolor, and yellow for virginica. The code uses d3.csv to load the data, then applies d3.scaleLinear with d3.extent for axes, rendered via d3.axisLeft and d3.axisBottom. The SVG circles are positioned using this scaling, and text labels for axes are appended manually.

AABCDB15

92% match

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

92% match