Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot for Iris DataSet

✓ Published0🌍 Public
Rrohinikotha
Last edited Mar 27, 2022
Created on Mar 27, 2022

This scatter plot visualizes the Iris dataset, displaying petal length and width for three species of iris flowers, each marked by a distinct color. Built with React and D3 v6, the visualization uses `d3.csv` to load data and `d3.scaleLinear` with `d3.extent` to map values to SVG circle positions. The code creates axes with `d3.axisLeft` and `d3.axisBottom`, and applies non-standard `rx` and `ry` attributes to the circles, which are not used for scaling. Data is sourced from a GitHub gist.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes while coloring each point by species (setosa, versicolor, or virginica). It also attaches sepal length and width values as redundant radius properties on the SVG circles, though these do not affect the visual size. The code loads CSV data using `d3.csv`, applies `d3.scaleLinear` and `d3.extent` for scales, and renders axes with `d3.axisLeft` and `d3.axisBottom` in an SVG element within a React-less HTML page.

Rrohinikotha
96% match
Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x and y axes while encoding species with color (violet, orange, and green). The visualization also incorporates sepal measurements as the radius and an elliptical shape for each point. Built with D3 v6 and React, the code uses `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to load data and render SVG circles, with axis labels and a large tick font size for readability.

Sspandhanabadekol
95% match
Loading thumbnail…

Fork of Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, showing relationships between petal and sepal measurements for three flower species, each colored distinctly (red, blue, or green). The plot uses D3 v6 with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map the data coordinates to SVG circles. It loads the dataset from a CSV URL and renders the visualization in an SVG element, including explicitly labeled axes for petal length and sepal length.

Bblikitha
94% match
Loading thumbnail…

Fork of Fork of Data Visualization- Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width for each sample. Points are colored by species (setosa, versicolor, and virginica) using a switch statement. The visualization is built with D3 v6 and rendered as SVG in a React framework. It uses D3's `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to load data, scale axes, and draw the plot. Axis labels and tick marks are customized with CSS styling in the HTML page.

RRohith arabati
94% match
Loading thumbnail…

Fork of Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width along the x and y axes while coloring each point by species (setosa, versicolor, virginica) in blue, red, and purple. The code loads data via `d3.csv`, uses `scaleLinear` and `extent` for scaling, and renders SVG circles with `selectAll().join()`. Axis labels are added with `axisLeft` and `axisBottom`, while the plot also encodes sepal measurements as `rx` and `ry` attributes, though these do not visually alter the circle shapes.

RRakshithaRao27
94% match
Loading thumbnail…

Fork of Fork of Fork of Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, plotting petal length against petal width, with points colored by species (setosa, versicolor, and virginica). The visualization encodes additional sepal dimensions as circle radii, using the `rx` and `ry` attributes. Built with React and D3 v3, it uses `d3.csv`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render an SVG, with custom margins, axis labels, and a large canvas-sized layout.

Bblikitha
94% match
Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This scatter plot of the Iris dataset maps petal length and width for three species, using light blue, light pink, and yellow to distinguish setosa, versicolor, and virginica. Built with D3 v6 in React, it loads CSV data via `d3.csv`, scales axes with `scaleLinear`, and renders circles as SVG elements. The code also includes axis labels and uses `extent` for domain calculation, with a fixed radius of five pixels per point.

TTulluripallavi
94% match
Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, showing petal length against petal width with points colored by species (setosa in blue, versicolor in red, virginica in green). It also reads sepal length and width values into each circle’s attributes, though the visual radius remains fixed. Built with React and D3 v6, the code uses `csv` to load data, `scaleLinear` and `extent` for scales, and `axisLeft`/`axisBottom` for axes, rendering circles and axis labels as SVG elements sized to the full window.

Ssaivinay143
94% match