Scatter plot

100%

✓ Published0🌍 Public

Last edited Mar 7, 2022

Created on Mar 6, 2022

This scatter plot visualizes the Iris dataset, mapping each flower’s course ID to its percentage score, with points colored by species (setosa, versicolor, or virginica). Built with D3 v6, it uses `d3.csv` to load data, `d3.scaleLinear` for the x- and y-axes, and `d3.axisLeft` and `d3.axisBottom` for the chart’s ticks. Circles are rendered as SVG elements via `d3.selectAll` and `join`, with a fixed radius but dynamic fill colors assigned by a custom marker function. The dataset is sourced from a remote CSV file hosted on GitHub.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Iris Scatter Plot

This scatter plot displays the classic Iris dataset, with each point representing a flower and colored by its species (setosa, versicolor, or virginica). The visualization uses D3 v5 to render an SVG, allowing users to dynamically select which measurements (sepal or petal length/width) appear on the x- and y-axes via dropdown menus. The code builds linear scales with `d3.scaleLinear`, generates axes with `d3.axisBottom` and `d3.axisLeft`, and adds a color legend using `d3.legendColor`. Circles are styled with an ordinal color scale, and grid lines are rendered through tick sizes.

Wwinniepooh520

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…

Scatter Plot Using Iris Data

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, virginica, or versicolor). The visualization uses D3 v6 APIs including `d3.csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, map values to screen coordinates, and render axes. Circles are drawn via SVG with `selectAll` and `join`, while the chart fills the browser window and includes rotated axis labels for clarity.

MManasaPatange

90% match

Loading thumbnail…

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) using green, red, and blue. Built with D3 v6 and SVG, it loads CSV data via `d3.csv`, scales domains with `scaleLinear` and `extent`, and renders circles with `selectAll().data().join()`. Axes are generated through `axisLeft` and `axisBottom`, with custom tick styling and static text labels for both dimensions. The plot fills the browser window with margins and a consistent point radius.

Aavinash021997

89% match

Loading thumbnail…

scatter plot

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers while coloring each point by species: red for setosa, green for versicolor, and purple for virginica. The code loads CSV data via D3’s `csv` function, parses numeric columns, and builds scales with `scaleLinear` and `extent`. Circles are rendered as SVG elements with fixed radius, while axes are generated using `axisLeft` and `axisBottom`. The visualization also encodes sepal measurements as `rx` and `ry` attributes, though these do not affect circle appearance given the constant radius. The chart fills the browser window with a pale turquoise title.

Vvagdevi-369

89% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal length on the y-axis, with points colored by species (setosa, versicolor, and virginica). Built with D3 v6 and rendered as SVG, it uses `d3.csv` to load data, `scaleLinear` and `extent` to set scales, and `axisLeft` and `axisBottom` for axes. Circle marks are appended via `data().join()`, with a custom color mapping function for each species. The plot fills the browser window and includes labeled axes.

KK V VINITHA

89% match

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width for individual flowers while encoding species through distinct green color markers. Implemented with D3 v6, it uses `d3.csv` for data loading, `d3.scaleLinear` with `d3.extent` to establish scales, and SVG circles for rendering. The chart includes labeled axes, with tick text and axis labels customized via CSS. A color-coding function assigns specific greens to setosa, versicolor, and virginica species, making species groups visually separable within the plot.

Ffouzanuddin

89% match

Loading thumbnail…

Iris Dataset Scatter Plot

This visualization displays the famous Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis, with each of the three species—setosa, versicolor, and virginica—represented by black, green, and orange circles respectively. The code loads CSV data using D3’s `csv` function, parses numeric fields, and constructs linear scales with `scaleLinear` and `extent`. It renders SVG circles with attributes bound to the data, and includes axis labels via `axisLeft` and `axisBottom`. The chart is built with D3 v6 and fills the browser window.

RRahulChaitu999

89% match