Skip to main content
SimilarExport ZIP
100%

Fork of Iris Dataset Scatter Plot

✓ Published0🌍 Public
DDanthalakirankumar
Last edited Mar 7, 2022
Created on Mar 7, 2022

This example visualizes the Iris dataset, plotting petal length and width for individual flowers, with each species (setosa, versicolor, virginica) assigned a distinct color (blue, red, black). It uses D3 v6 to fetch the CSV data via `d3.csv`, then maps the values to screen coordinates using `d3.scaleLinear` and `d3.extent`. Circles are rendered with an SVG `join` operation, and axes are added with `d3.axisLeft` and `d3.axisBottom`. The plot fills the browser window, leveraging a full-screen SVG canvas.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris dataset, plotting petal length against petal width for individual flower specimens while color-coding points by species (setosa, versicolor, and virginica). It uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to generate axes and map data to screen coordinates. The SVG circles are rendered with `select`, `append`, and a join operation, and the data is loaded via `d3.csv` from a raw GitHub source.

Bblikitha
97% match
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against petal width while color-coding each point by species—setosa in blue, versicolor in red, and virginica in black. The SVG scatter plot is rendered using D3 v6, with axes created via `axisLeft` and `axisBottom`. Data is loaded asynchronously from a GitHub Gist using `d3.csv`, then transformed with `scaleLinear` and `extent` to map values to screen coordinates. Though the code sets `rx` and `ry` attributes, circles remain round with a fixed radius of five pixels.

DDivyaVellanki
96% match
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against petal width for three iris species, each colored blue, red, or black. It uses D3 v6 with `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render an SVG scatter plot. Circles are positioned on the x- and y-scales, with the underlying sepal measurements stored as `rx` and `ry` attributes. The visualization fills the browser window and includes labeled tick marks with enlarged font sizes.

Bbindhureddy98
96% match
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against petal width for three iris species, each colored blue, red, or black. It uses D3 v6 with `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, scale axes, and render an SVG scatter plot. Circles are positioned on the x- and y-scales, with the underlying sepal measurements stored as `rx` and `ry` attributes. The visualization fills the browser window and includes labeled tick marks with enlarged font sizes.

Bbindhureddy98
96% match
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This D3.js (v6) scatter plot visualizes the Iris Dataset, mapping petal length and width for each flower sample while encoding species with distinct colors (purple, red, teal). The SVG rendering uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for tick marks. Circular marks are positioned via `selectAll('circle').join('circle')` and labeled with rotated axis titles for petal length and width. The plot fills the browser window and includes a 24px tick font size for readability.

YYbg99g
95% match
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width to the x and y axes while colors denote the three species (setosa, versicolor, and others). It also embeds sepal length and width as additional attributes on the circles. The code loads CSV data via `d3.csv`, scales the values with `d3.scaleLinear`, and renders SVG circles using `d3.select` and `.join()`. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, and the visualization fills the browser window using `window.innerWidth` and `window.innerHeight`.

Eeravellisaimeghana
95% match
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width to the x and y axes. Each point’s color corresponds to the species of iris, distinguishing setosa, versicolor, and virginica. The chart is rendered as an SVG using D3 v6, with axes generated via `d3.axisLeft` and `d3.axisBottom`. Scales are created with `d3.scaleLinear`, and the data is loaded asynchronously from a CSV file using `d3.csv`.

LLakshmiVandanaNunna
95% match
Loading thumbnail…

Fork of Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, displaying petal length against petal width for individual flowers. Each point is colored by species, using blue, red, and black to distinguish setosa, versicolor, and virginica. The visualization uses D3 v6 APIs including `select`, `scaleLinear`, `extent`, and `axisBottom` to map data to SVG circles, with point radius fixed while sepal dimensions are encoded as rx and ry attributes on the circle elements. The chart fills the entire browser window.

DDivyaVellanki
95% match