100%

Iris Scatter Plot

✓ Published1🌍 Public

Last edited Mar 24, 2023

Created on Mar 24, 2023

This scatter plot visualizes the Iris dataset, displaying sepal width against petal length. Each point represents a flower sample, with iris species distinguished by both shape—circles for setosa, crosses for versicolor, and diamonds for virginica—and color via a legend. The visualization uses D3.js v7 to create an SVG with linear scales and axis generators, loading data from a CSV file. Customizable axes allow viewers to explore relationships between any pair of the four measured features.

AI-generated description

Iris Scatter Plot

This project creates a reusable scatter plot for the Iris dataset using D3.js. The plot differentiates the iris species by shape and includes a legend to indicate the species.

Getting Started

Clone or download the repository.
Run npm install to install the required dependencies.
Run npm start to start the development server.
Open your browser and navigate to http://localhost:8080/.

Customization

You can change the features displayed on the x-axis and y-axis by modifying the arguments passed to the Scatterplot constructor in index.js. The available features are:

'petal_width'
'sepal_width'
'petal_length'
'sepal_length'

MIT Licensed

Similar vizzes

Loading thumbnail…

Iris Scatter Plot

This animated scatter plot explores the Iris dataset by cycling through different feature pairs on the x- and y-axes every three seconds, revealing relationships between sepal and petal measurements. Three Iris species—setosa, versicolor, and virginica—are distinguished by distinct geometric symbols (circle, cross, diamond) and colors. Built with D3.js v7, the SVG visualization uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.symbol` to render the points, axes, and a legend, updating the entire chart on each feature switch.

Ssumanthsomu1

95% match

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris dataset, showing sepal length on the x-axis and petal length on the y-axis, with each of the three species distinguished by color. The visualization uses D3 v7's scaleLinear for positioning, scaleOrdinal for categorical coloring, and the axisBottom and axisLeft components to create labeled axes. A separate color legend, built with custom SVG elements, maps each species to a specific color using a switch statement. Data is loaded from a local CSV file and parsed with d3.csvParse before being rendered as circular marks.

Ffloraho401

94% match

Loading thumbnail…

Iris Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, mapping sepal length on the x-axis against petal length on the y-axis. Each of the 150 flowers appears as a colored point, with a legend distinguishing the three species (setosa, versicolor, and virginica) using a pastel ordinal color scale. Built with D3 v7, the code loads CSV data via `d3.csv`, applies linear scales with `d3.scaleLinear` for axes, and renders SVG circles, axis ticks, labels, and a custom legend.

Mmaddulanagasanjana@gmail.com

94% match

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis for each flower sample. The code loads the CSV data using d3.csv, parses numeric fields, and scales the values with d3.scaleLinear and d3.extent. Circles mark each data point in an SVG rendered at full viewport size. Axes are added with d3.axisLeft and d3.axisBottom, while custom text labels for "Petal Length" and "Sepal Length" are positioned using SVG transforms. The example uses D3 v6 and a margin-based layout for the plot.

LLakshmiVandanaNunna

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

94% match

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris dataset, showing sepal length against sepal width for three species of iris flowers. The data comes from a CSV file containing measurements of 150 samples, with each species represented by a different color using D3’s scaleOrdinal and schemeSet1 palette. The visualization uses D3 v5 to load the data via csv(), create linear scales with scaleLinear, and render SVG circles with axisBottom and axisLeft for labeled axes. The chart includes gridlines and a title, with opacity applied to circles to reveal overlapping points.

Xxiplus

94% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting sepal length against petal length for 150 flowers across three species. The visualization uses D3.js (v7) with a modular architecture separating axes, scatter plot, and visualization logic. Axes are rendered using d3.axisLeft and d3.axisBottom, while data points are displayed as circles with a fixed radius of 10 pixels. The data is loaded from a CSV file and parsed using d3.csvParse, with numeric values converted from strings.

Kkratikashetty1102@gmail.com

94% match

Loading thumbnail…

scatter plot

This scatter plot visualizes the Iris Dataset, displaying sepal length on the x-axis and sepal width on the y-axis, with each point colored by species (Iris-setosa, Iris-versicolor, or Iris-virginica). The visualization uses D3 v6 to load CSV data, apply linear scales via `d3.scaleLinear`, and render circles in an SVG. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, and additional petal length and width values determine each circle’s radius properties. The plot fills the browser window, with styled tick labels and axis text.

DDineshK2602

93% match