Skip to main content
SimilarExport ZIP
100%

Fork of ICE 7-1 Reusable Scatter Plot

✓ Published0🌍 Public
SSANEEM MOHAMMAD
Last edited Mar 26, 2023
Created on Mar 26, 2023

This example presents an animated scatter plot of the classic Iris flower dataset, encoding sepal length and petal width measurements. It dynamically cycles through four different attribute pairs on the x-axis every ten seconds, with species distinguished by color (using `d3.scaleOrdinal` and `schemeCategory10`) and unique SVG symbol shapes. Built with D3 v6, the reusable chart leverages `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to update axes smoothly, while the enter-update-exit pattern animates the repositioning of data points.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot

This example shows an animated scatter plot of the Iris dataset, cycling through four measured features (petal width, sepal width, petal length, and sepal length) every two seconds. The visualization colors each data point by species—blue for setosa, red for versicolor, and yellow for virginica—using D3.js v6. It demonstrates a reusable scatter plot component built with `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, updating the x-axis domain and circle positions via `setInterval`. The SVG rendering includes styled axes and white-stroked circles on a black background.

SSaiSreya1
94% match
Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris dataset, with each flower's species distinguished by both color and point shape. The chart animates every 10 seconds, cycling through the four measured dimensions on the x-axis while keeping sepal length constant on the y-axis. Built with D3 v6, the visualization uses `scaleLinear` and `axisBottom` to configure scales and axes, while `scaleOrdinal` maps species to shape and color. The `join` operation efficiently updates SVG paths, enabling smooth transitions between data dimensions.

NNeeharikaGali
94% match
Loading thumbnail…

Fork of Fork of ICE 7-1 Reusable Scatter Plot

This example presents a reusable scatter plot of the Iris dataset, encoding species with distinct colors and shapes while mapping petal width and sepal length to the x and y axes. It cycles through four quantitative columns every ten seconds, updating the x-axis domain and point positions with animation. The visualization uses the D3 v6 module API, including `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `symbol` for shape encoding, with SVG rendering driven by a `setInterval` loop that re-invokes the chart function.

KKarnisrikanth
94% match
Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris dataset, encoding flower species through both color and symbol shapes. The visualization cycles through four numeric attributes every ten seconds, updating the x-axis scale to display different variable combinations. Built with D3 v6, it uses `scaleLinear` for axes, `scaleOrdinal` for color and shape mapping, and `axisBottom`/`axisLeft` for rendering. SVG paths represent data points with transitions between updates, while `setInterval` drives the automatic axis changes. The dataset includes sepal and petal measurements for three iris species.

NNeeharikaGali
94% match
Loading thumbnail…

Fork of ICE - 7 - Reusable Scatter Plot

This example presents a reusable scatter plot of the Iris dataset, visualizing relationships between sepal and petal dimensions. Each point is colored by species (setosa, versicolor, virginica) and uses a distinct symbol shape via d3.symbol and scaleOrdinal. The plot cycles through different X-axis variables every five seconds using setInterval, re-calling the scatterPlot function. Built with d3.scaleLinear, axisLeft, and axisBottom, the visualization renders as animated SVG paths and includes an on-page legend.

NNitheeshSama
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot visualizes the Iris flower dataset, cycling through four different x-axis measurements—petal width, sepal width, petal length, and sepal length—while keeping sepal length fixed on the y-axis. Each data point is colored by species (setosa, versicolor, virginica), with a static legend. The example uses D3 v6 APIs such as `scaleLinear`, `axisLeft`, `axisBottom`, and `setInterval` to update the chart, rendering SVG circles and text with a custom `scatterPlot` reusable function.

AArefa Patwary
94% match
Loading thumbnail…

Fork of ICE7 - Reusable Scatter Plot

This example presents the classic Iris dataset in an animated, reusable scatter plot built with D3 v6. It cycles through different sepal and petal measurements on the x-axis, with points colored by species (setosa, versicolor, and virginica) and a custom legend. The visualization uses `d3.csv` for data loading, `scaleLinear` and `extent` for axes, and a `setInterval` with the `scatterPlot` function to update the chart. Custom shapes are drawn as SVG circles with animations.

AArruSkywalker
94% match
Loading thumbnail…

Fork of ICE7 - Reusable Scatter Plot

This reusable scatter plot animates through the Iris dataset, cycling the x-axis through petal width, sepal width, petal length, and sepal length while keeping sepal length on the y-axis. It colors data points by species (setosa, versicolor, virginica) with a custom legend and rotating axis labels. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The animation uses `setInterval` to update the plot’s x-value binding, demonstrating a modular `scatterPlot` chart factory.

NNHRK555
94% match