Skip to main content
SimilarExport ZIP
100%

ICE 7

✓ Published0🌍 Public
DDaniel Mata
Last edited Mar 26, 2022
Created on Mar 24, 2022

This animated scatter plot cycles through four pairings of Iris dataset measurements every second, revealing clusters of the three iris species. Built with D3 v6, the visualization uses a custom reusable `scatterPlot` module with `scaleLinear`, `axisLeft`, and `axisBottom`, while species are color-coded green, blue, and red. Animated via `setInterval`, the SVG updates the x-axis mapping across petal width, sepal width, petal length, and sepal length, with the initial view plotting petal width against sepal length.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE - 7

This animated scatter plot cycles through different pairs of Iris flower measurements, revealing patterns in the dataset. It uses D3.js (v6) to render SVG circles, with a dynamic x-axis that rotates through petal width, sepal width, petal length, and sepal length. Species are color-coded via a custom marker function, and the visualization includes axis labels, a title, and a legend created with D3's `scaleLinear`, `axisLeft`, and `axisBottom` APIs.

Ttarungunda
94% match
Loading thumbnail…

ICE - 7 Reusable Scatter Plot

This scatter plot animates through different pairings of Iris flower measurements, cycling every two seconds between petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length on the y-axis. Built with D3 v6, the visualization uses a reusable `scatterPlot` module that leverages `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, with circles colored by species (setosa, versicolor, or virginica). Data comes from a CSV of the classic Iris dataset, and the transitions are driven by `setInterval` calling the plot function with new x-value accessors.

AArv1228
94% match
Loading thumbnail…

ICE - 7

This animated scatter plot cycles through different pairings of the Iris dataset's four measurements, updating every two seconds to reveal changing correlations. Each point is colored by species—blue for setosa, red for versicolor, and yellow for virginica—with white stroke outlines, while axis labels rescale to fit the newly selected dimensions. The visualization uses D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles, with a `setInterval` callback driving the rotation of x-axis variables. Rendered as an SVG with smooth transitions between states, it highlights how petal width, sepal width, petal length, and sepal length relate differently across flower types.

Aavinashchinta99
94% match
Loading thumbnail…

ICE-7

This animated scatterplot cycles through the four Iris flower measurements on the x-axis while keeping sepal length fixed on the y-axis. Colored circles (orange, blue, and white) represent the three species, with a static legend and title overlaid on a red background. The visualization uses D3 v6 APIs such as `csv`, `scaleLinear`, `axisLeft`, and `axisBottom`, and updates the x-axis every few seconds via `setInterval`. Data originates from a GitHub-hosted CSV file of the classic Iris dataset.

MMgk1255
93% match
Loading thumbnail…

ICE-7

This interactive scatter plot visualizes the Iris Dataset, cycling through different feature pairings (petal width, sepal width, petal length, and sepal length) every two seconds. Built with D3.js, it uses a reusable scatter plot module with `scaleLinear` for axes, `extent` for data domains, and `axisLeft`/`axisBottom` for tick marks, rendered as animated SVG in a full-browser view.

Ssowmyanagula@my.unt.edu
93% match
Loading thumbnail…

ice - 7

This animated scatter plot visualizes the Iris Dataset, cycling through different pairings of sepal and petal measurements every two seconds. The visualization uses D3.js version 6.7.0, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to build the chart, with species color-coded as red, blue, or grey. Rendered as an SVG, the plot updates dynamically by changing the x-axis variable through a `setInterval` loop, while the reusable `scatterPlot` chart component handles the layout and axis rendering.

SSaikiran2029
93% match
Loading thumbnail…

ICE-7 (Reusable D3 Scatter Plot)

This example presents an animated scatter plot of the Iris dataset using a reusable D3 module. It shows how petal width and sepal length correlate across iris species, with points colored green, blue, or black by species. The visualization cycles through different measurement pairs on the x-axis every two seconds using `setInterval`. It leverages D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll`, rendering as SVG circles with radii set by the `.radius()` method.

AAnjan Shrestha
93% match
Loading thumbnail…

ICE-7(1)

This animated scatter plot cycles through the four Iris flower measurements, displaying them on the x-axis one at a time. The visualization uses a color-coded marker system to distinguish between the three species of Iris flowers within the dataset. The animation is driven by a `setInterval` function that updates the scatter plot's x-axis data every two seconds. The plot is rendered using SVG and built with the D3.js library, leveraging its modules for data parsing, linear scaling, and axes creation. The Iris dataset is loaded from a remote URL in CSV format.

AAbhinav-Mullapudi
93% match