ICE6 SDV

100%

✓ Published1🌍 Public

Last edited Mar 9, 2026

Created on Mar 9, 2026

This example shows a scatter plot of the classic Iris dataset, comparing sepal length against petal length. The D3.js library (v7) is used within a React (v19) application, where the plot is built inside an SVG element using `d3.scaleLinear` for axes and `d3.axisBottom` and `d3.axisLeft` for tick marks. Each of the 150 data points from the CSV is rendered as a semi-transparent, steelblue circle. The chart includes a title and axis labels, and is created programmatically with a `useEffect` hook that fetches and parses the data with `d3.csv`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Iris Scatter Plot

This example visualizes the classic Iris dataset, plotting petal length against sepal length as a scatter plot of circles. The code uses D3 v7 to load the CSV data, parse numeric fields, and create linear scales for the axes. SVG is used for rendering, with axes and labels generated via `axisLeft` and `axisBottom`. The viewport dimensions determine the chart size, and margin-based spacing positions the axis labels and plot area, creating a clean, full-screen scatter plot.

DDan Waters

92% match

Loading thumbnail…

ICE6.1

This visualization displays the classic Iris dataset as an SVG scatterplot, comparing sepal length against petal length. It uses the `d3.scaleLinear` scale and `d3.extent` to map data to screen coordinates, with colored circles differentiating the three iris species (setosa, versicolor, and virginica). The code loads data via `d3.csv`, renders axes with `d3.axisLeft` and `d3.axisBottom`, and labels the chart with SVG text elements. The visualization adapts to the viewport size and is built with D3 v6 within a React-compatible HTML page.

BBryanA999

92% match

Loading thumbnail…

ICE6 - Scatter Plot

This scatter plot visualizes the Iris flower dataset, mapping sepal length against sepal width for 150 samples. The visualization uses a React frontend with D3 v7, leveraging `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart. Circles are rendered with d3’s data join, featuring interactive click selections that highlight the chosen data point with white fill and black stroke. The SVG output includes labeled axes and animated transitions on circle styling, with data loaded from a CSV file and parsed into numeric values.

Bbrodyoneal10@gmail.com

91% match

Loading thumbnail…

DV-ICE-6

This example presents a scatter plot of the Iris dataset, mapping petal length and width on the axes while encoding sepal measurements through circular marker size and species through color. The visualization uses D3 v6 with React, rendering SVG circles positioned via scaleLinear and extent functions. It loads CSV data asynchronously, applies custom parsing to convert numeric fields, and uses axisLeft, axisBottom, and text labels for annotations.

Ssowmyanagula@my.unt.edu

91% match

Loading thumbnail…

ICE 6

This scatter plot visualizes the Iris dataset, mapping petal length and petal width on the x- and y-axes, with each point colored by species. It uses D3 v6 to load CSV data, apply linear scales, and render SVG circles with axes and labels. The code demonstrates `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and the `join` method for binding data to SVG elements. The chart includes custom tick styling and a simplified color scheme for the three iris species.

AAmar09nath

91% match

Loading thumbnail…

ScatterPlot_ICE6

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). The axes are labeled with sepal length and petal length, though the data encoding uses petal dimensions for positioning and sepal dimensions as circle radii. Built with React and d3.v6, the example loads CSV data via `d3.csv`, applies `scaleLinear` and `extent` for scales, and renders SVG circles with attributes driven by the parsed numeric fields. Axis generation uses `axisLeft` and `axisBottom`.

Bbindusreeja

90% match

Loading thumbnail…

ICE-6

This example visualizes the relationship between sepal width and sepal length for iris flowers using a scatterplot. It shows individual data points as green circles, with sepal width on the x-axis and sepal length on the y-axis. The visualization is built with React and D3 v7, using `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and `csv` to load the Iris dataset from GitHub. The code explicitly parses numeric values for both dimensions and renders the plot in SVG format, with clear axis labels.

66264kusuma@gmail.com

90% match

Loading thumbnail…

ICE 6

This example displays the Iris dataset as a scatter plot of petal length against petal width, with each data point colored by species. It uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to load the data, scale axes, and render SVG circles. Although the code defines `rx` and `ry` attributes from sepal measurements, the circles are drawn with a fixed radius, so the plot shows a standard clustered distribution.

AAmar09nath

90% match