Skip to main content
SimilarExport ZIP
100%

Fork of Data Visualization- Scatter Plot with Iris DataSet

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

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.

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

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.

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

Data Visualization- Scatter Plot with Iris DataSet

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements. Dropdown menus dynamically switch which attribute appears on each axis, with points colored by species (setosa, versicolor, virginica). The visualization uses D3 v6 scales (scaleLinear, d3.extent), axes (axisBottom, axisLeft), and SVG circles, while the data loads from a CSV URL via d3.csv. Dropdown interactions are handled through D3's selection and event binding methods.

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

Fork of Scatter Plots

An interactive scatter plot of the Iris dataset lets users choose which of the four flower measurements—sepal length, sepal width, petal length, or petal width—appears on each axis via dropdown menus built with React. Points are colored by species using a fixed color scale, with d3.axisBottom and d3.axisLeft rendering grid lines and tick labels. The visualization uses d3.scaleLinear for positioning, d3.extent for domain calculation, and SVG circles for rendering, with data loaded from a CSV source.

Ssrinivasaraosankula
93% 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
92% match