Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
PPujitha14challagulla
Last edited Jun 25, 2022
Created on Jun 25, 2022

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements via dropdown menus for the x and y axes. Circles are colored by species, with petal length and width shown on the default axes. The visualization is built with React, D3 v6, and SVG, using `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` for scales and axes, with data loaded from a CSV URL.

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 Data Visualization- Scatter Plot with Iris DataSet

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two of the four flower measurements (sepal length/width, petal length/width) via dropdown menus. The visualization uses D3 v6 within a React framework, rendering SVG circles colored by species (setosa, versicolor, virginica). The code leverages d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft to construct axes, while the dropdown menus update the chart dynamically by re-scaling and re-plotting the data points. Data is loaded from a CSV file.

PPujitha14challagulla
96% match
Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This interactive scatter plot visualizes the Iris dataset, displaying the relationship between two selected attributes such as sepal length and petal width. Users can change the X and Y axes through dropdown menus, with data points colored by species. The visualization is built with D3 v6 and React, using `d3.csv`, `scaleLinear`, and `axisBottom`/`axisLeft` to render SVG circles and axes. The code includes parsed data from a remote CSV URL and supports dynamic axis updates.

Ssaiteja0725
96% match
Loading thumbnail…

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

This visualization displays the Iris dataset as an interactive scatter plot, allowing users to compare any two measurements—sepal length, sepal width, petal length, or petal width—via dropdown menus. Each plotted circle is colored by iris species, with a fixed radius and opacity for easy visual grouping. The chart is rendered as an SVG using React and D3 v6, leveraging `d3.csv` for data loading, `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` for ticks. Axis labels and a title are included, with axes updated dynamically as menu selections change.

Ssaiteja0725
95% 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 Fork of Scatter Plots

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. The visualization uses React dropdown menus to dynamically switch which measurement attributes are plotted on the x and y axes, with points colored by species. Built with D3.js v5 and rendered as SVG, the code uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and `d3.axisBottom`/`d3.axisLeft` to construct the plot. The iris data is loaded via `d3.csv` from a linked gist.

Ssaivinay143
95% match
Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal dimensions by selecting different attributes for the x- and y-axes via dropdown menus. The visualization uses d3.scaleLinear for axis scaling, d3.select for DOM manipulation, and d3.axisBottom and d3.axisLeft for rendering axes with gridlines. Data points are rendered as SVG circles, colored by species class (setosa, versicolor, virginica) with opacity for overlap handling. The React framework manages the dropdown state, while D3 handles the chart rendering.

Rrohinikotha
94% match
Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three iris species. The visualization uses dropdown menus to dynamically switch which attribute is mapped to the x-axis and y-axis, with axes and labels updating accordingly. Built with D3 v5 and React, the example uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render SVG circles colored by species, with gridlines and axis labels providing clear context for the selected variables.

JJyothicherukuri
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