creating scatter plot with iris data

100%

creating scatter plot with iris data

✓ Published0🌍 Public

Last edited Mar 7, 2022

Created on Mar 7, 2022

This example uses D3 v6 to create an interactive scatter plot from the Iris dataset, loading CSV data via `d3.csv` and rendering SVG circles for each observation. It maps petal length and width to the x and y axes using `d3.scaleLinear`, with colors distinguishing the three iris species (setosa, versicolor, and virginica). The axes are generated with `d3.axisLeft` and `d3.axisBottom`, and axis labels identify the variables. The chart fills the browser window and includes a legend via the species colors, demonstrating a straightforward data-driven visualization workflow.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Creating a Scatter Plot with D3.js

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width to the x- and y-axes and coloring each point by species (setosa, versicolor, or virginica). It uses D3.js v6 with a linear scale and axis generators (`d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`) to render SVG circles. Data is loaded via `d3.csv` from a remote URL, with numeric fields parsed on ingestion. The plot is sized to the full window and includes custom tick styling.

SShivaKarpe

93% match

Loading thumbnail…

Creating a Scatter Plot with D3

This example visualizes the Iris Dataset as a scatter plot, encoding petal length on the x-axis and petal width on the y-axis, with each point colored by species (green for setosa, yellow for versicolor, blue for virginica). It also reads sepal length and width as additional attributes for each circle, though these are not mapped to visual channels. Built with D3 v6, the code uses `d3.csv` to load data, `scaleLinear` and `extent` for scaling, and `axisLeft`/`axisBottom` for axes. Circles are appended via `selectAll` and `join`, rendered as SVG, with axis labels and a title manually positioned.

SShivaKarpe

91% match

Loading thumbnail…

Scatter Plot for Iris Data

This example renders the classic Iris dataset as a scatter plot using D3 v6. It maps petal length and petal width to the x and y axes, coloring each point by species (setosa, versicolor, or virginica) with yellow, pink, or blue fills. The dataset is loaded via `d3.csv` from a GitHub raw URL, with numeric parsing of all measurements. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, using `d3.scaleLinear` and `d3.extent` to set domains based on the data.

Aarcothanmukha

91% match

Loading thumbnail…

Scatter_plot iris

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width for each sample and coloring points by species (green for setosa, purple for versicolor, red for virginica). It uses D3 v6 with `d3.csv` to load the data, `scaleLinear` for x and y axes, and `axisLeft` and `axisBottom` to render scales. Circles are drawn in SVG with `join('circle')`, and additional sepal dimensions are encoded in the attributes, though the primary visual encoding focuses on petal measurements.

SSohilaBheemReddy

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

90% match

Loading thumbnail…

Scatter Plot with Iris DataSet

This example visualizes the Iris flower dataset using a scatter plot, mapping petal length and petal width to the x and y axes, with each point colored by species (setosa, versicolor, or virginica). It loads CSV data via D3’s `csv` function, transforms numeric columns, and renders SVG circles with `selectAll` and `join`. The plot uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to position points and axes, with custom margins and labels. The data source is a remote GitHub-hosted CSV file.

AAnanthulaaditya

90% match

Loading thumbnail…

d3 scatterplot

This visualization displays the Iris dataset, plotting petal length against petal width as a scatterplot of circles rendered in SVG using D3 v6. It loads CSV data via `d3.csv`, maps quantitative values using `scaleLinear` with `extent`, and sets circle positions through `attr('cx')` and `attr('cy')`. Axes are added using `axisLeft` and `axisBottom`, with margins applied to position the plot within the full window dimensions. The code uses `select`, `data`, and `join` to bind the parsed data points to circle elements.

GGeorgi Dimitrov

90% match

Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This example visualizes the classic Iris dataset with a scatter plot, mapping petal length and width as the x and y coordinates for each data point. Each of the three iris species is distinguished by a unique fill color, and the plot includes labeled axes for both dimensions. The code uses D3 version 6.7.0, loading data from a remote CSV via `d3.csv`, then employing `d3.scaleLinear` for scaling and `d3.axisLeft` and `d3.axisBottom` for the axes. The visualization is rendered as an SVG appended to the body, with circles representing each flower, and all elements are positioned using functions from the D3 API.

Eeravellisaimeghana

90% match