Skip to main content
SimilarExport ZIP
100%

Scatter plot visualization of iris data using d3.js ICE-6

✓ Published0🌍 Public
Mmomopng
Last edited Mar 6, 2022
Created on Mar 6, 2022

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width for each observation while coloring points by species (setosa, versicolor, or virginica). Positioned using d3.scaleLinear and d3.extent, circles are rendered in SVG with fixed radius, while additional sepal measurements are attached as rx and ry attributes. Axes are generated with d3.axisLeft and d3.axisBottom, and labels annotate both dimensions and the chart title. Data loads via d3.csv from a remote GitHub gist.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 6: Iris Dataset Scatter Plot

This D3.js scatter plot visualizes the Iris dataset, mapping petal length and petal width to the x- and y-axes while coloring points by species (setosa, versicolor, virginica). The SVG rendering uses `d3.csv`, `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom` to produce a full-width interactive chart. Circles include `rx` and `ry` attributes from sepal measurements, though these do not affect the visible circular markers, which have a fixed radius. The plot loads raw CSV data from a GitHub gist and labels both axes.

AAnjan Shrestha
93% match
Loading thumbnail…

ICE-6 Scatter Plot Graph

This D3.js scatter plot visualizes the Iris flower dataset, mapping petal length and width for each sample. Points are colored by species—setosa in orange, versicolor in green, and virginica in pink—revealing distinct clusters. The SVG chart uses `d3.scaleLinear` for axes and `d3.extent` for domain scaling, with `d3.axisBottom` and `d3.axisLeft` rendering the tick labels. The code fetches data from a remote CSV via `d3.csv` and sets the point radius to 4.8 pixels with explicit width and height from the window size.

SSatyaVineeth
92% match
Loading thumbnail…

Scatter Plot - ICE6

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The code uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to render ticks. Circles are appended and filled via d3-selection, with hardcoded color values per species. The SVG spans the full window, and axis labels are added as text elements with rotated positioning.

RRaajithaSabbineni
92% match
Loading thumbnail…

ICE- 6 Iris Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width on the x- and y-axes while coloring each point according to its species (setosa, versicolor, or virginica). Using D3 v6, the code loads the CSV data with `d3.csv`, scales the axes with `d3.scaleLinear`, and renders circles as SVG elements. It labels the axes as “Petal-length” and “sepal-length” (the latter rotated via an SVG transform). The plot fills the browser window, with axis ticks generated by `d3.axisLeft` and `d3.axisBottom`.

Ssaidhiraj16
92% match
Loading thumbnail…

Data Visualization - ICE-6 Scatter Plot Graph

This visualization uses D3 v6 to render a scatter plot of Iris flower data, mapping petal length and width to the x and y axes while using sepal dimensions to determine each point’s rx and ry attributes, creating elliptical markers. A color scale distinguishes the three species (setosa, versicolor, virginica) as yellow, blue, and red. The SVG chart loads data from a CSV via `d3.csv`, scales positions with `scaleLinear` and `extent`, and adds axes using `axisLeft` and `axisBottom`. The dataset originates from a gist containing credit card usage records, though the code processes Iris measurements.

Ssuchitra2602
92% match
Loading thumbnail…

ICE 6 Scatter Plot

This D3.js scatter plot visualizes the Iris Dataset, plotting petal length on the x-axis and petal width on the y-axis. Data points are color-coded by species: pink for setosa, green for versicolor, and blue for virginica. The visualization encodes each flower’s sepal length and width as the `rx` and `ry` attributes of the circles, adding an additional dimension to the plot. Built with vanilla HTML, it uses `d3.csv` to load the data, `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom` for scales and axes, and appends SVG circles to render the marks.

SSnigdha6698
92% match
Loading thumbnail…

ICE-6

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis against petal width on the y-axis, with each of the three species (setosa, versicolor, and virginica) colored green, brown, and blue respectively. It also encodes sepal length and width as the rx and ry attributes of each circle, though these do not affect the default circular shape due to a fixed radius. The code uses D3 v6 methods including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, map scales, and render axes in an SVG. Data is fetched from a remote GitHub gist URL.

Aadapavaishnavi12
92% match
Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The visualization uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct axes, while circles are bound to the data via `selectAll` and `join`. Data is loaded asynchronously from a CSV URL using D3’s `csv` function, with numeric parsing applied to all measurements. The chart fills the browser window, displaying axis labels for petal length and sepal length.

Ggayathrikavya
92% match