Skip to main content
SimilarExport ZIP
100%

Data Visualization - ICE-6 Scatter Plot Graph

✓ Published0🌍 Public
Rrajasrilekkala
Last edited Mar 19, 2023
Created on Mar 19, 2023
Forked from HTML Starter

This visualization displays a scatter plot of Iris species data, plotting petal length on the x-axis against petal width on the y-axis, with points colored by species (yellow for setosa, blue for versicolor, red for virginica). The SVG rendering uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll` with data joins, while loading the dataset via `d3.csv` from a GitHub gist. The code also maps sepal measurements to the circle’s `rx` and `ry` attributes, though these are not used for visual encoding.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualization - ICE-6 Scatter Plot Graph

This visualization uses D3 v6 to render a scatter plot of Iris flower data, mapping petal length and width to the x and y axes while using sepal dimensions to determine each point’s rx and ry attributes, creating elliptical markers. A color scale distinguishes the three species (setosa, versicolor, virginica) as yellow, blue, and red. The SVG chart loads data from a CSV via `d3.csv`, scales positions with `scaleLinear` and `extent`, and adds axes using `axisLeft` and `axisBottom`. The dataset originates from a gist containing credit card usage records, though the code processes Iris measurements.

Ssuchitra2602
95% match
Loading thumbnail…

Data Visualization - ICE-6 Scatter Plot Graph

This scatter plot visualizes the Iris flower dataset, showing the relationship between petal length and petal width as the primary axes, with each point colored by species (setosa in yellow, versicolor in blue, virginica in red). The graph uses D3 v6 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while circles are positioned using `cx` and `cy` attributes. The data is loaded as CSV and parsed with numeric conversions, with margins and a full-window responsive layout.

SSravan1888
95% 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, 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…

Scatter Plot - ICE6

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The code uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to render ticks. Circles are appended and filled via d3-selection, with hardcoded color values per species. The SVG spans the full window, and axis labels are added as text elements with rotated positioning.

RRaajithaSabbineni
94% match
Loading thumbnail…

ICE-6 Scatter Plot Graph

This visualization uses the Iris Dataset to plot petal length against petal width as circles, with each of the three species—setosa, versicolor, and virginica—colored yellow, blue, and orange respectively. Built with D3 v6, it loads data via `d3.csv`, scales the axes using `scaleLinear` and `extent`, and renders SVG circles with an SVG container sized to the window. The chart also includes axes generated with `axisLeft` and `axisBottom`, along with custom axis labels.

RRajeevMukhesh
93% match
Loading thumbnail…

ICE-6 Data Visualization-Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width along the x and y axes. Each circle is colored by species—setosa in light blue, versicolor in light pink, and virginica in yellow. The visualization uses D3 v6 APIs including `d3.csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft`. The data is loaded from a remote CSV and rendered as SVG circles with a fixed radius, displaying the relationship between the two floral measurements across species.

SSrilekha24
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 Scatter Plot

This scatter plot visualizes the Iris Flower Dataset, mapping sepal length on the x-axis and petal length on the y-axis. Points are colored by species—blue for setosa, yellow for versicolor, and red for virginica—using filled circles rendered as SVG elements. Built with D3 v6 and React, the visualization uses `d3.csv` to load data from a GitHub Gist, `d3.scaleLinear` for continuous axes, and `d3.axisLeft` and `d3.axisBottom` to draw labeled axes. The plot dynamically sizes to the browser window.

RRamya19-hub
93% match