100%

Fork of Iris Scatter Plot

✓ Published0🌍 Public

Last edited Apr 10, 2023

Created on Apr 10, 2023

This scatter plot visualizes the Iris dataset, mapping sepal width against petal length for three iris species. Each species appears as a distinct symbol—circles, crosses, and diamonds—with a legend in the upper right corner. The visualization uses D3.js v7, with the data loaded via `d3.csv` from a GitHub Gist. The chart is rendered as SVG, using `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.symbol` to generate the custom point shapes.

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 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.

Ssumanthsomu1

93% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width as x and y coordinates while coloring each point by species (setosa, versicolor, or virginica). It also stores sepal measurements as data attributes on each circle, though these are not used for positioning. The implementation uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render an SVG with circles. Data is fetched from a GitHub Gist, and the viewport fills the browser window.

SSnapika

93% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width on the x- and y-axes, with each point colored by species (green, blue, or red). Built with D3 v6 and SVG, it uses `d3.csv`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes. The code also reads sepal measurements but does not use them visually. Data is loaded from a GitHub-hosted CSV file, and the chart fills the browser window with fixed margins and 24-pixel tick labels.

Llikith1266

93% match

Loading thumbnail…

Fork of Scatter Plot with Shape

This interactive D3.js scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis against petal length on the y-axis. The chart distinguishes the three iris species by drawing each data point with a unique symbol, using the `symbolsFill` scale and the d3 `symbol()` generator to assign different glyph shapes. A legend on the right side, built with `d3.scaleOrdinal`, identifies the species associated with each shape. The plot reads data from a remote CSV file, parsing it with `d3.csvParse` and rendering the visualization using d3's join-based API for efficient updates.

Ppardha1411

93% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width onto the x- and y-axes. Each point is colored by species—green, orange, or brown—using a custom marker function. Built with D3 v6, the SVG chart uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes. Data is loaded via `d3.csv` from a GitHub gist, with numeric fields parsed on ingestion. The visualization fills the screen and includes axis labels for petal length and sepal length.

BBajiSharifPatan@my.unt.edu

93% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width to the x- and y-axes while coloring each point by species (setosa, versicolor, virginica). Circles are rendered using D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs, with the sepal measurements stored as unused `rx` and `ry` attributes. The SVG fills the window, and data is loaded asynchronously via `d3.csv` from a GitHub gist. The view includes 24-pixel tick labels and no interactivity.

SSnigdha6698

92% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the classic Iris Dataset, mapping petal length and width on the axes and coloring each point by species (setosa, versicolor, or virginica). It uses D3 v6 to load CSV data, parse numeric fields, and render an SVG with circles. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while `d3.scaleLinear` and `d3.extent` set the scales. Although the circles carry extra sepal length and width attributes, only the petal dimensions are visible in the plot.

SSreekarveeravelly

92% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This is a D3.js scatter plot visualizing the Iris Dataset, separating flower species by color (blue, red, black) based on petal length and width. The chart maps sepal dimensions to circle radii, creating variable-sized points. It loads data via `d3.csv`, uses `d3.scaleLinear` and `d3.extent` for scales, and renders axes with `d3.axisLeft` and `d3.axisBottom`. Drawn as SVG circles with `d3.selectAll().join()`, it includes labeled axes for petal and sepal measurements.

Ggopiganta

92% match