Skip to main content
SimilarExport ZIP
100%

ScatterPlot Practice

✓ Published0🌍 Public
AAatish Dhami
Last edited Jan 10, 2023
Created on Jan 10, 2023
Forked from HTML Starter

This example visualizes the classic Iris dataset as an interactive scatter plot, mapping petal length and petal width onto the x and y axes. Each flower species is represented by a distinct color—setosa in blue, versicolor in green, and virginica in black—with hover tooltips revealing exact coordinate values. The visualization is built using D3 v7 within a React framework, utilizing `scaleLinear`, `axisBottom`, and `axisLeft` for scaling and axes, `symbol` and `scaleOrdinal` for shape generation, and the `join` API to efficiently update SVG paths. The code loads data asynchronously via `d3.csv` and renders to an SVG canvas sized to the browser window.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers while coloring each point by species (setosa, versicolor, or virginica). It uses D3 v6 within a React-free HTML page, leveraging `d3.csv` for data loading, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for ticks. Circles are rendered via SVG with a fixed radius, and the code also destructures sepal dimensions but only uses them as unused attributes on each circle, not for positioning. The visualization fills the browser window with a large bottom margin.

RRohith arabati
93% match
Loading thumbnail…

Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width to the x and y axes while coloring each circle by species (setosa, versicolor, or virginica). It uses D3 v6 with scales (d3.scaleLinear), axes (d3.axisBottom, d3.axisLeft), and data loading via d3.csv. The React and SVG rendering are not explicitly used; instead, the code appends circles directly to an SVG element in the DOM. The dataset is fetched from a GitHub gist and parsed to numeric values before plotting.

Aamiralitah
93% match
Loading thumbnail…

Scatter plot

This scatter plot visualizes the Iris dataset, mapping petal length and width for each flower and coloring points by species (setosa, versicolor, virginica). The visualization uses D3 v6 within a React setup, loading CSV data via `d3.csv` and rendering SVG circles. Axes are created with `d3.axisLeft` and `d3.axisBottom`, while scales use `d3.scaleLinear` and `d3.extent`. The chart also includes axis labels, but notably, the x-axis text incorrectly labels petal length as "Sepal_Length," and the circle attributes include non-standard `rx` and `ry` properties.

Kkakumanusreya
92% match
Loading thumbnail…

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 v7 with the `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` APIs to load and render the data as SVG circles. Axis labels indicate "Petal Length" and "Sepal Length," though the latter appears mislabeled relative to the plotted variables. The chart fills the browser window with margins and styled tick text.

Ffloraho401
92% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot displays the Iris dataset, plotting petal length against sepal width for individual flowers. The visualization is built with React and rendered as SVG elements, using D3 v7 scales (d3.scaleLinear) and axes. Each data point is a circle with a radius of 10, and hovering reveals the petal length as a native tooltip. The code uses d3.extent to set domains, d3.csv for data loading, and d3.format with a custom tick formatter that replaces 'G' with 'B' for axis labels.

Aangelathacker123
92% match
Loading thumbnail…

Scatter Plot with Iris DataSet

This example visualizes the Iris flower dataset using a scatter plot, mapping petal length and petal width to the x and y axes, with each point colored by species (setosa, versicolor, or virginica). It loads CSV data via D3’s `csv` function, transforms numeric columns, and renders SVG circles with `selectAll` and `join`. The plot uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to position points and axes, with custom margins and labels. The data source is a remote GitHub-hosted CSV file.

AAnanthulaaditya
92% match
Loading thumbnail…

scatter plot

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers while coloring each point by species: red for setosa, green for versicolor, and purple for virginica. The code loads CSV data via D3’s `csv` function, parses numeric columns, and builds scales with `scaleLinear` and `extent`. Circles are rendered as SVG elements with fixed radius, while axes are generated using `axisLeft` and `axisBottom`. The visualization also encodes sepal measurements as `rx` and `ry` attributes, though these do not affect circle appearance given the constant radius. The chart fills the browser window with a pale turquoise title.

Vvagdevi-369
92% match
Loading thumbnail…

scatterplot

This example visualizes the Iris dataset as a scatterplot, mapping petal length along the x-axis and sepal length along the y-axis. Points are colored by species through CSS classes, with setosa in yellow, versicolor in red, and virginica in pink. The visualization uses D3 v7 APIs including `csv` for data loading, `scaleLinear` for scaling, `axisLeft` and `axisBottom` for axes, and SVG circles rendered by `selectAll().data().join()`. The chart fills the browser window and is built with a React-friendly plain JavaScript approach.

Bbjfmbeck
92% match