Skip to main content
SimilarExport ZIP
100%

ICE-6 Scatter Plot

✓ Published0🌍 Public
SSharanya1307
Last edited Mar 23, 2023
Created on Mar 23, 2023

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length and encoding species with distinct D3 symbol shapes. The visualization uses D3 scales, axes, and a reusable scatterPlot function to render SVG paths. Data loads asynchronously from a GitHub Gist CSV file, with numeric parsing applied to all flower measurements. The chart fills the browser window and applies a 100-pixel size to each symbol generator.

AI-generated description

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

MIT Licensed

Similar vizzes

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
94% match
Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and petal width on the axes while coloring points by species. The chart uses D3 v6 with SVG rendering, loading CSV data via `d3.csv` and parsing numeric values. Scales are created with `d3.scaleLinear` and axes with `d3.axisLeft` and `d3.axisBottom`. Circles are drawn with `d3.selectAll` and a data join, with fill colors assigned per species via a switch function. Axis labels are added as SVG text elements.

Llikith1266
93% 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, virginica, or versicolor) via a brightness-based marker function. After loading the CSV data with `d3.csv`, the example uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from D3 v6 to establish scales and axes, while `select` and `join` render circles for each observation. The SVG rendering fills the browser window, with sepal length and width values stored as point metadata but not plotted.

SSaiSree0122
93% match
Loading thumbnail…

ICE-6 ScatterPlot (Dhanusree Kodali)

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while encoding species with distinct colors. Points are rendered as SVG circles using D3 v6’s scaleLinear, extent, axisLeft, axisBottom, and join methods. The visualization also stores sepal measurements as additional properties on each mark, though they are not displayed. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, with axes labeled and styled through D3’s selection API.

DDhanusree Kodali
93% match
Loading thumbnail…

ICE - 6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width as x/y coordinates while encoding sepal length and width in each point’s `rx` and `ry` attributes, with species indicated by color (violet, pink, or a square symbol). The D3 v6 code loads data via `d3.csv`, scales it with `d3.scaleLinear`, and renders SVG circles using `d3.symbol` for the setosa class. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, with custom text labels for petal length and sepal length.

SSweetierams
93% match
Loading thumbnail…

ICE 7 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length and distinguishing species through different SVG symbols. It uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbols for species markers, and d3.axisLeft/axisBottom for tick marks. The code loads CSV data via d3.csv and employs a reusable chart pattern with the scatterPlot function, rendering marks as generated path data through d3.symbol and d3.symbolGenerator.

SSreejaBellamkonda
93% 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
93% match
Loading thumbnail…

ICE-6

This interactive scatter plot displays the Iris dataset, mapping petal length and width for each flower species. The visualization uses D3 v6 to load CSV data from a GitHub gist, with axes labeled to show sepal length and width. Each data point is rendered as a circle with a radius of five pixels, positioned using `scaleLinear` functions. The code applies D3's `selectAll` and `join` pattern to create and update SVG circle elements, while `axisLeft` and `axisBottom` generate the coordinate axes.

Ssaiteja0725
92% match