Skip to main content
SimilarExport ZIP
100%

Fork of scatter plot

✓ Published0🌍 Public
Eeravellisaimeghana
Last edited Mar 8, 2022
Created on Mar 8, 2022
Forked from scatter plot

This example presents a scatter plot of the Iris Dataset, mapping petal length and width for each flower. Points are colored green, yellow, or black to indicate the species (setosa, versicolor, or virginica). The visualization uses D3’s `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions. The SVG circles also encode sepal dimensions via the `rx` and `ry` attributes, though their visual effect is minimal. Data is loaded from a CSV URL, and axes are labeled with custom font styling.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Iris Dataset Scatter Plot

This visualization displays the classic Iris Dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis. Individual data points are colored by species—green for setosa, yellow for versicolor, and black for virginica—using D3’s scaleLinear and extent functions to set the scales. The SVG rendering uses D3 v6 to append circles, with axes added via axisLeft and axisBottom. Although sepal length and width values are read from the CSV, they are assigned as rx and ry attributes on circles, which does not affect their circular appearance since the radius remains fixed.

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

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset, plotting petal length and width for individual flowers while representing sepal dimensions through the horizontal and vertical radii (rx and ry) of each elliptical mark. The flowers are color-coded by species—blue for setosa, red for versicolor, and black for virginica. The scatter plot is rendered as an SVG using D3 v6, with data loaded via `d3.csv`, axes generated through `d3.axisLeft` and `d3.axisBottom`, and scales defined with `d3.scaleLinear` and `d3.extent`. The visualization fills the entire browser window.

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

Fork of Iris Dataset Scatter Plot

This example displays the Iris Dataset as a scatter plot, encoding petal length and width along the x- and y-axes, with points colored by species (setosa, versicolor, and virginica). Built with D3 v6 and rendered as SVG, it uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.axisLeft` and `d3.axisBottom` to draw the chart’s scales. The visualization fixes the point radius at 4 pixels but additionally sets `rx` and `ry` attributes on each circle to the sepal dimensions, though these do not affect the visual shape.

Ssaivinay143
94% match
Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and petal width on the y-axis. Each point is colored by species (setosa, versicolor, or virginica), though the code also loads sepal dimensions without displaying them. Built with D3 v6, it uses `d3.csv` to load data, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for tick marks. Circles are rendered as SVG elements with `selectAll` and `join`, with axis labels added via SVG text elements.

MMeghanaArepalli
94% 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. Points are colored by species (setosa, versicolor, virginica) using blue, red, and black. The chart also encodes sepal length and width into the `rx` and `ry` attributes of each circle, though these do not affect rendering since they are not recognized SVG circle properties. The implementation uses D3 v6 to load CSV data with `d3.csv`, scales with `scaleLinear`, and draws axes via `axisLeft` and `axisBottom`.

SShivaKarpe
94% match