Skip to main content
SimilarExport ZIP
100%

Iris Dataset Scatter Plot with D3.js

✓ Published0🌍 Public
KKrishnaPriyaKurra
Last edited Mar 27, 2022
Created on Mar 6, 2022
Forked from HTML Starter

This example visualizes the classic Iris dataset as a scatter plot, showing the relationship between petal length (x-axis) and sepal length (y-axis) for three flower species, with each species color-coded via a custom marker function. The plot uses D3.js v6 to load CSV data, parse numeric fields, and render SVG circles positioned with `d3.scaleLinear` and `d3.extent`. Axes are drawn using `d3.axisLeft` and `d3.axisBottom`, while labels are added manually. The implementation also leverages `d3.csv` for asynchronous data fetching and `select`/`join` for data binding, with a responsive full-window SVG layout.

AI-generated description

Creating a Scatter Plot with D3.js

MIT Licensed

Similar vizzes

Loading thumbnail…

Iris Dataset Scatter Plot

This D3.js scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal length on the y-axis. Each point represents an iris flower, colored by species (setosa in chartreuse, versicolor in orange, and virginica in blue). The code loads data from a CSV file via `d3.csv`, uses `scaleLinear` for axes, and renders circles as SVG elements. Axes are generated with `axisLeft` and `axisBottom`, while text labels for the axes are appended separately.

VVaishnavi6199
93% match
Loading thumbnail…

IRIS Dataset Scatter plot

This D3.js scatter plot visualizes the Iris Dataset, mapping sepal length on the x-axis and petal length on the y-axis. The SVG rendering uses `d3.csv` to load and parse the data, `d3.scaleLinear` for axis scaling, and `d3.extent` to compute domains. Circles are drawn with a fixed radius, and axes are generated using `d3.axisLeft` and `d3.axisBottom`. The plot includes axis labels for sepal length, petal length, and species, with a margin layout that accommodates the tick text. The code uses `d3.select` to append elements and the `join` operator for efficient circle creation.

PPrathyusha0304
92% match
Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width along the x- and y-axes while coloring each point by species. It also encodes sepal length and width into the horizontal and vertical radii of each circle, creating an elongated marker shape. The code loads data from a CSV using `d3.csv`, applies `d3.scaleLinear` and `d3.extent` for scales, and renders circles with SVG attributes `cx`, `cy`, `r`, `rx`, and `ry`. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, and the visualization fills the browser window.

Vvidhyanamini
92% match
Loading thumbnail…

Iris Dataset Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal length for three flower species. It uses D3.js v6 (d3.csv, d3.scaleLinear, d3.axisLeft, d3.axisBottom) to load and parse the data, scale the points, and render the SVG circles. Each species is assigned a distinct color: skyblue for setosa, red for versicolor, and green for virginica. The visualization includes labeled axes, margins, and a radius of 6 for all data points.

SSnapika
92% match
Loading thumbnail…

Iris_scatter_plot

This visualization presents the classic Iris dataset as an interactive scatter plot, mapping petal length and width along the x- and y-axes. Each circle represents a flower, colored by species (green for setosa, purple for versicolor, red for virginica) using a custom marker function. Built with D3 v6, the code loads CSV data via `d3.csv`, scales positions with `scaleLinear`, and renders SVG circles using data joins. Axis labels display sepal length and petal width, while the plot dynamically sizes to the browser window. The example demonstrates fundamental D3 data binding and axis generation.

SSohilaBheemReddy
92% match
Loading thumbnail…

Iris Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length to the x-axis and petal width to the y-axis, with each point colored by species (blue for setosa, red for versicolor, black for virginica). The code uses D3 v6, loading CSV data via `d3.csv`, scaling with `scaleLinear`, and rendering SVG circles with `selectAll` and `join`. It also draws labeled x- and y-axes using `axisBottom` and `axisLeft`, while the plot’s dimensions adapt to the browser window.

KKolliTeja
92% 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
92% match
Loading thumbnail…

IRIS Dataset Scatter plot

This example visualizes the classic Iris Dataset, plotting sepal length against petal length for individual flowers. Each circle represents a sample from one of three species, though the color mapping for species is not applied in the rendering. The visualization uses D3 v5 to load CSV data, create linear scales with `d3.scaleLinear` and `d3.extent`, and render the scatter plot as SVG circles with axes generated by `d3.axisLeft` and `d3.axisBottom`. The chart fills the browser window and includes custom axis labels.

SSumanya4
92% match