Skip to main content
SimilarExport ZIP
100%

Scatter Plot as a function-iris data

✓ Published1🌍 Public
NNita
Last edited May 30, 2021
Created on May 30, 2021

This example presents a scatter plot of the Iris flower dataset, mapping sepal length on the x-axis and sepal width on the y-axis for each sample. It uses React and D3 v6, with `d3.scaleLinear` for both axes and `d3.extent` to derive the domains from the CSV data loaded via `d3.csv`. The visualization renders circles in an SVG container, positioned using scaled coordinates, and applies margins to offset the plot within the full viewport.

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-iris data

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and sepal width for individual flowers. The visualization renders blue circles with a fixed radius of 50 pixels, using D3 v6's `scaleLinear` and `extent` functions to map the data coordinates to the full browser window dimensions. The React-based example loads CSV data from an external gist URL, parses numeric columns, and appends SVG circles to the page.

NNita
95% match
Loading thumbnail…

Reusable Scatter Plot_iris data

This example visualizes the Iris dataset as a scatter plot, showing sepal length against sepal width for individual flowers. It uses a reusable scatter plot component built with D3 v6 and React, where scales map data values to SVG circle positions. The code loads CSV data from a GitHub gist via `d3.csv` and applies `d3.scaleLinear` with `d3.extent` for domains. Circles are appended to an SVG container with margins and a transform for positioning.

NNita
94% match
Loading thumbnail…

Fork of Scatter Plot-iris data

This scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and sepal width to the y-axis. Each flower is rendered as a large blue circle using SVG within a React framework, with the plot area offset by margins via a group transform. The code loads data from a remote CSV file using D3’s `csv` function, converts values to numbers, and scales positions with `scaleLinear` and `extent`. The chart fills the browser window, as the body has no margin and hidden overflow.

NNita
93% match
Loading thumbnail…

Iris Scatter Plot

A scatter plot of the Iris dataset displays sepal length against sepal width, with each flower represented as a circle. The visualization uses React and D3 v6, with scales created via `scaleLinear` and axes rendered as SVG components. The code loads CSV data with `d3.csv`, formats tick values using `format`, and includes simple tooltips through SVG `<title>` elements.

Ee-ines
93% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, comparing sepal length against sepal width for individual flowers. The visualization uses React components to render an SVG, with D3’s `scaleLinear` and `extent` functions mapping data values to pixel coordinates, and axes generated via `xScale.ticks()` with custom tick formatting. Data is loaded asynchronously from a CSV URL using the `csv` function and a custom `useFetch` hook, with circles representing each observation and native SVG `<title>` elements providing hover tooltips.

MMonish Vassantrai
93% match
Loading thumbnail…

Scatterplot with Iris Data

This scatterplot visualizes the Iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis, with each flower’s species encoded by a circular mark. The React-based chart uses d3.scaleLinear for both axes, d3.extent to compute domains, and custom SVG axis components with tick labels formatted via d3.format. Data loads asynchronously through d3.csv, and each circle includes a native SVG title tooltip showing the sepal length value.

Aafcchilders
93% match
Loading thumbnail…

Scatter Plot - Iris flower

This interactive scatter plot visualizes the Iris flower dataset, showing the relationship between sepal length and sepal width. Each circle represents a sample, with hover tooltips revealing the exact sepal length value. The visualization uses React with D3's `scaleLinear` for axis scaling and `extent` to compute data domains. Axes and tick marks are generated using custom React components (`AxisBottom`, `AxisLeft`) that map D3 scale values to SVG elements. Data is loaded asynchronously from a CSV file via D3's `csv` function. The plot renders as an SVG with a clean, muted color palette and Poppins typography.

TTatyana Milanova
93% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the Iris dataset, plotting sepal width against sepal length for individual flowers. The visualization is rendered as an SVG using React components, with D3.v7 utility functions like `d3.csv` to load data and `d3.scaleLinear` with `d3.extent` to map data values to pixel coordinates. The chart includes labeled axes with grid lines and translucent turquoise circles, each featuring a tooltip that reveals the exact measurements on hover.

Sszchee1
92% match