Skip to main content
SimilarExport ZIP
100%

Scatter Plot-iris data

✓ Published5🌍 Public
NNita
Last edited Jan 1, 2024
Created on May 26, 2021
Forked from HTML Starter

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.

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 as a function-iris data

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.

NNita
95% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for individual flowers. The visualization uses React with D3 scales to map data values to screen coordinates, rendering SVG circles as marks with native tooltips. Axes are generated using D3’s scaleLinear and tick methods, with formatted axis labels. The data is loaded asynchronously via D3’s csv function from a GitHub gist containing the classic Fisher iris measurements.

33ssalunke
95% 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
94% match
Loading thumbnail…

Scatter Plot

A scatter plot visualizes the relationship between sepal length and sepal width in the Iris dataset. Each circle represents a flower sample, with a tooltip revealing its exact sepal length. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes, `extent` for domain calculation, and SVG for rendering. The code handles CSV data loading through a custom `useData` hook, with axis components and marks created via React components.

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

Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and sepal width. Each flower is rendered as a circle positioned by the `xScale` and `yScale` linear scales. The visualization uses React components to structure the SVG output, with separate modules for axes and data marks. The bottom axis uses a tick format that abbreviates large numbers, while the source data is loaded asynchronously from a CSV file using D3's `csv` function.

KKolezhannochka
94% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping sepal width and sepal length for individual flowers. The visualization uses D3 v5 functions like `scaleLinear` and `extent` to compute scales, while React components render SVG circles for each data point, complete with tooltips displaying the exact measurements. The chart includes styled axes with tick marks, and the data is loaded asynchronously via the `csv` function from a remote URL. The clean design, featuring teal markers and a Poppins font, emphasizes the distribution and correlation between the two sepal dimensions across the flower species.

Zzarioualid@gmail.com
94% 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
94% match