i — VizHub

100%

i

✓ Published0🌍 Public

Last edited Mar 25, 2022

Created on Mar 25, 2022

Animated scatter plot of the Iris dataset cycles through four feature pairs every two seconds, visualizing relationships between sepal and petal measurements. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a reusable `scatterPlot` function. SVG circles update via `selectAll` and `join`, while a `setInterval` triggers re-renders with new x-value columns. Data loads as CSV from a GitHub Gist, with axes and labels styled using the Share Tech font.

AI-generated description

reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

7

This animated scatter plot cycles through four attribute pairings of the Iris Dataset, switching the x-axis variable every two seconds while keeping sepal length on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a reusable `scatterPlot` function inspired by Towards Reusable Charts. SVG circles and axes update via `selection.join`, with a `setInterval` driving the data-value changes. The visualization is rendered as full-window SVG with a custom Share Tech font and no interactive tooltips.

Ppeesarie

89% match

Loading thumbnail…

7

This animated scatter plot cycles through different axis pairings of the classic Iris Dataset, updating every two seconds. The visualization is built as a reusable chart with D3’s `scaleLinear`, `axisLeft`, and `axisBottom`, using `selectAll` and `.join` to bind data to SVG circles. A `setInterval` swaps which four flower measurements—petal width, sepal width, petal length, and sepal length—map to the x-axis, while the y-axis remains fixed on sepal length. The SVG rendering fills the browser window with styled text from the Share Tech font.

Ppeesarie

88% match

Loading thumbnail…

Untitled

This animated scatter plot explores the Iris dataset, cycling through four different variable pairings on the x-axis every two seconds while keeping sepal length on the y-axis. Built with D3.js, it uses the reusable chart pattern from `scatterPlot.js`, which leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render circles with a fixed radius. The data is loaded as CSV from a GitHub Gist and parsed into numeric values. The animation is driven by `setInterval` in `index.js`, which updates the chart’s x-value accessor and re-invokes the plot function.

Eeravellisaimeghana

88% match

Loading thumbnail…

Data Visualization

This scatter plot animates through four dimensions of the Iris dataset, cycling the x-axis between petal width, sepal width, petal length, and sepal length every two seconds. The visualization uses D3 v6 with a reusable `scatterPlot` function that leverages `scaleLinear`, `axisLeft`, and `axisBottom` for axes. Data is loaded via `csv` from a GitHub Gist and parsed into numeric values. The plot renders as SVG circles with a radius of five, and the animation is driven by `setInterval` updating the `xValue` accessor and re-calling the plot.

MMireia Parra

88% match

Loading thumbnail…

The Animated Reusable D3 Scatter Plot

This animated scatter plot cycles through four attributes of the Iris Dataset—petal width, sepal width, petal length, and sepal length—on the x-axis while keeping sepal length on the y-axis. Built as a reusable D3 module, it uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `transition` to smoothly move circles and update axes every 3.5 seconds. The SVG rendering includes staggered update delays per point, with enter animations growing radius from zero, all styled with the Share Tech font.

AAndre J Denais

88% match

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot displays the Iris dataset, cycling through four different feature pairings on the x-axis—petal width, sepal width, petal length, and sepal length—while keeping sepal length on the y-axis. Each species (setosa, versicolor, virginica) is color-coded with red, green, or blue markers. Built with D3 v6, the visualization uses a reusable `scatterPlot` module with `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while a `setInterval` loop updates the x-value mapping every few seconds. The JSON data is loaded via `d3.csv` and drawn as SVG circles with animated transitions.

AAAL FORHAD

88% match

Loading thumbnail…

Scatter Plot

This animated scatter plot explores the Iris Dataset, cycling through four measured attributes on the x-axis while keeping sepal length on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles via SVG. Every two seconds, the plot updates its x-value mapping to a different column, smoothly redrawing points to reveal correlations between petal width, sepal width, petal length, and sepal length. The animation demonstrates a reusable chart pattern with configurable width, height, margins, and radius.

Ppavankalyan1507

88% match

Loading thumbnail…

Reusable Scatter Plot using iris data set

This example presents an animated scatter plot of the classic Iris dataset, cycling through four different feature combinations on the x-axis—petal width, sepal width, petal length, and sepal length—while the y-axis remains sepal length. Data points are colored by species (setosa, versicolor, virginica) via a reusable `scatterPlot` function built with D3 v6, which uses `scaleLinear` for axes and `axisLeft`/`axisBottom` for ticks. The animation is driven by a `setInterval` that updates the x-value accessor and re-renders SVG circles. Data is loaded as CSV from a gist using D3’s `csv` method, with legend rectangles and text labels added manually.

Vvidhyanamini

87% match