Skip to main content
SimilarExport ZIP
100%

IRIS Scatterplot

✓ Published3🌍 Public
Ppranav-vis
Last edited Sep 12, 2021
Created on Sep 6, 2021

This example visualizes the classic Fisher's Iris dataset, plotting sepal width against petal length for each flower sample as a circle. The D3.js v7 linearithmic scales (`d3.scaleLinear`) map the data to SVG coordinates, with the `AxisBottom` and `AxisLeft` custom React components rendering ticks and labels. Hovering over a point shows a tooltip with the formatted petal length value. The code loads data from a CSV using D3's `csv` function and renders the plot as SVG circles within a React application.

AI-generated description

Rendering CSS named colors from MDN.

MIT Licensed

Similar vizzes

Loading thumbnail…

IRIS Dataset Scatter plot

This example visualizes the classic Iris dataset, plotting sepal length on the x-axis against petal length on the y-axis for each flower specimen. Each circle represents one data point, with the scatter plot revealing the overall distribution and clustering patterns across the three species. The visualization is built using React with D3 v5, leveraging `d3.csv` to load the data, `scaleLinear` and `extent` for scaling, and `axisLeft` and `axisBottom` to render the axes. The SVG chart is rendered full-screen, with axis labels for Sepal Length, Petal Length, and Species.

RRohith arabati
92% match
Loading thumbnail…

Iris Scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length against sepal width for individual flowers, with hover tooltips revealing exact measurements. The chart uses React with D3 v7, employing `scaleLinear` for axes and `extent` for domain calculation, while SVG circles render the data points. Axis components generate ticks and labels through D3's `ticks()` method. The visualization uses `d3.csv` to fetch and parse the dataset, with marks styled using CSS classes and a Poppins font.

JJames Rhodes
92% match
Loading thumbnail…

Iris Scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis, with each of the 150 flowers represented as a circle. The React-driven SVG uses D3 v7 scales, including `scaleLinear` and `extent`, to map data values to pixel coordinates. Axis components generate tick marks and labels via `xScale.ticks()`, while formatted tooltips appear on hover through SVG `<title>` elements. Data is loaded asynchronously with `d3.csv` from a remote gist, and the layout employs explicit margins for axis labels.

Ssaidhiraj16
91% match
Loading thumbnail…

IRIS Scatterplot with Color and Color Legend

This visualization displays the classic Iris dataset as a scatterplot, mapping petal length on the x-axis and sepal width on the y-axis. Each data point is colored by species using d3.scaleOrdinal, with a custom React-rendered color legend positioned to the right. The SVG is built with React components for axes and marks, using d3.scaleLinear for positioning and d3.extent to compute domains. Axis labels are rotated and styled with CSS. The data loads asynchronously via d3.csv, which parses numeric fields before rendering.

Ppranav-vis
91% match
Loading thumbnail…

Scatterplot with Iris Data

This scatterplot visualizes the Iris dataset, plotting sepal width against petal length for individual flowers. The visualization uses React components to render SVG elements, with D3 scales (d3.scaleLinear) mapping data coordinates to screen positions. The code loads CSV data via d3.csv, applies numeric type coercion, and builds custom axes (AxisBottom, AxisLeft) alongside circular marks. Each circle includes a native SVG `<title>` element for basic tooltip functionality, with axis labels for Sepal Width and Petal Length displayed on the chart.

SSalman Chowdhury
91% match
Loading thumbnail…

Scatterplot with Iris Data

This scatterplot visualizes the classic Iris dataset, plotting sepal length against sepal width for individual flower samples. Built with React and D3 v7, the visualization renders as an SVG, using `d3.csv` to load data from a GitHub-hosted CSV file. The code employs D3's `scaleLinear` for axis scaling, with custom `AxisBottom` and `AxisLeft` components generating tick marks and labels. Each data point appears as a filled circle with a tooltip showing its sepal length value, while the axes are labeled "Sepal Length" and "Sepal Width." The visualization demonstrates a clean, functional scatterplot with interactive hover details.

AArefa Patwary
91% match
Loading thumbnail…

D3 Scatterplot

This example shows a D3 scatterplot of the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. The SVG viewport fills the browser window, with circles representing individual data points and axis ticks styled at 18px. Built with React and d3.v7, the code loads the CSV via `d3.csv`, then uses `scaleLinear` for both axes, `axisLeft` and `axisBottom` to render tick marks, and a data join to append circles with tooltips showing coordinate values. The data comes from a GitHub-hosted CSV file.

Rrespingu
91% match
Loading thumbnail…

iris scatter

This example shows a scatter plot of the Iris flower dataset, comparing petal length against sepal width. The visualization uses React to render SVG circles positioned via d3.scaleLinear scales, with d3.axisBottom and d3.axisLeft for tick marks. Data is loaded asynchronously from a CSV file using d3.csv, with numeric parsing applied to each measurement field. The plot includes axis labels and a clean, minimal style with teal-colored marks on a white background.

NNart Williamson
91% match