ICE7

100%

✓ Published0🌍 Public

Last edited Jul 1, 2022

Created on Jun 30, 2022

An animated scatter plot cycles through four Iris dataset variable pairs every two seconds, revealing different correlations between measurements. Each circle represents a flower sample, with axes rescaling to the current variable selection. The reusable chart module updates its x-value accessor while preserving the same SVG rendering. D3's `scaleLinear`, `axisLeft`, `axisBottom`, and data joins create the idempotent visualization, with `setInterval` driving the sequential column switching.

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 four different pairings of the Iris dataset’s numeric columns, using a reusable charting API built with D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The SVG visualization updates every two seconds, re-mapping the x-axis to a new attribute while keeping the y-axis fixed. The code defines a configurable `scatterPlot` function with setters for data, dimensions, and value accessors, then applies it repeatedly to a full-window canvas with a custom font.

Bbhargavarathod

92% match

Loading thumbnail…

ICE 7

This animated scatter plot cycles through the four numeric dimensions of the Iris dataset, changing the x-axis attribute every two seconds while keeping sepal length fixed on the y-axis. It uses d3's `scaleLinear` for axis scaling, `axisLeft` and `axisBottom` for tick marks, and the `join` operator for idempotent SVG circle updates. Data loads via `d3.csv`, and the plot resizes to the browser window.

Vvineeth-001

92% match

Loading thumbnail…

ICE7.1

This animated scatter plot cycles through four Iris dataset measurements on the x-axis while keeping sepal length fixed on the y-axis. Each second, the visualization removes all SVG elements, reconfigures the D3 scaleLinear domain, and re-renders circles colored by species (setosa, versicolor, virginica). The reusable scatterPlot function encapsulates margins, axes via axisLeft and axisBottom, and marks, while index.js drives the interval with csv loading and dynamic xValue updates.

BBryanA999

92% match

Loading thumbnail…

ICE 7

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.

DDaniel Mata

92% 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

91% match

Loading thumbnail…

ice7

This animated scatter plot cycles through four different column pairings of the Iris dataset every two seconds, with each species represented by a distinct color (red, black, or blue). Built with D3 v6, it uses reusable chart functions like `scatterPlot()` with `scaleLinear`, `axisBottom`, and `axisLeft` to render SVG circles and axes. The data is loaded asynchronously via `d3.csv` from a GitHub gist, while `setInterval` drives the rotation of x-axis variables.

Ppreethamkesa

91% match

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

91% match

Loading thumbnail…

ICE 7

This reusable D3.js scatter plot animates through different axis configurations of the Iris dataset, cycling petal and sepal measurements every two seconds. Implemented with the D3 API, it uses `scaleLinear`, `axisLeft`, `axisBottom`, `symbols`, and `scaleOrdinal` to map species to distinct colors and shapes. The SVG rendering includes a dynamic legend and title, with the plot’s margins and radius configurable, demonstrating a chart pattern for interactive data exploration.

RRebecca Moore

90% match