Skip to main content
SimilarExport ZIP
100%

ICE 7

✓ Published0🌍 Public
Bbhargavarathod
Last edited Mar 22, 2022
Created on Mar 22, 2022

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7

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.

Ppeesarie
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…

ICE-7 Scatter Plot

This interactive scatter plot, built with D3, displays the Iris dataset and animates a cycle through different feature combinations on the x-axis while the y-axis remains fixed. The visualization uses a reusable chart API, defining a `scatterPlot` function with methods for width, height, data, and margin, and leverages D3's `scaleLinear`, `axisLeft`, and `axisBottom` for rendering. The animation is driven by `setInterval`, updating the x-value every two seconds, and the plot is rendered as an SVG with a custom font loaded from Google Fonts.

Ppethavenu
92% 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 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
91% match
Loading thumbnail…

ice - 7

This animated scatter plot visualizes the Iris dataset, cycling through different feature pairs every two seconds. Each point represents a flower sample, colored by species (setosa, versicolor, or virginica) and positioned using d3’s `scaleLinear` and `extent` for axes. The reusable `scatterPlot` function, imported from a separate module, renders axes via `axisLeft` and `axisBottom`. The SVG is constructed with d3 selections, and the animation uses `setInterval` to update the x-value mapping. Data is loaded as CSV from a GitHub gist, and the plot’s axes are labeled as “X-AXIS” and “Y-AXIS.”

Ssri7harsha
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
91% 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
90% match