Skip to main content
SimilarExport ZIP
100%

ICE-7 Fork of Scatter Plot - ICE7_RahulSai

✓ Published0🌍 Public
Kkirangithub23
Last edited Jul 3, 2022
Created on Jul 3, 2022

This interactive scatter plot visualizes the Iris dataset, coloring points by species (setosa, versicolor, virginica) and animating the x-axis through four measurement columns on an interval. Built with d3.v6, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `join` to render SVG circles and axes, while a custom legend and rotated axis label are appended directly. The chart cycles the x-axis variable, updating scales and re-rendering marks each second.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot - ICE7_RahulSai

This interactive scatter plot visualizes the Iris dataset, displaying species as colored points. The chart cycles through different x-axis variables—petal width, sepal width, petal length, and sepal length—while the y-axis remains fixed on sepal length. Built with D3.js, it uses the `scatterPlot` reusable chart module, `scaleLinear`, `axisLeft`, and `axisBottom` for scaling and axes. Animated transitions via `setInterval` update the plot's x-value mapping. The SVG render includes a color legend for the three Iris species: setosa (blue), versicolor (cyan), and virginica (yellow).

RRahulSai05
93% match
Loading thumbnail…

Fork of ICE-7 Resuable scatter plot

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements with points colored by species (green for setosa, indigo for versicolor, red for virginica). The visualization cycles through different column pairings every two seconds, animating the axes and point positions across four variable combinations. Built with D3 v6, the example uses a reusable scatterPlot module that employs scaleLinear, extent, axisLeft, and axisBottom to render the SVG chart, with circles encoded with both x/y positions and rx/ry attributes for elliptical shapes.

SSravyaAnnadi
89% match
Loading thumbnail…

ICE-7:Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, cycling through four attribute pairings on the x-axis every two seconds while the y-axis remains fixed on sepal length. Built with D3.js, it employs a reusable chart API with `scaleLinear`, `axisLeft`, and `axisBottom` for axes. Points are colored by species via `scaleOrdinal`, and the SVG circles animate through a `setInterval` loop, with a legend and custom Share Tech font styling.

Mmanasanimmagadda13
89% match
Loading thumbnail…

Fork of ICE-7 Resuable scatter plot

This visualization is an animated scatter plot of the Iris flower dataset, colored by species (setosa, versicolor, and virginica). It cycles through different combinations of sepal and petal measurements every two seconds, allowing viewers to see how the data clusters shift across various dimensions. Built with D3.js (version 6.7.0), the plot uses a reusable `scatterPlot` module that leverages `scaleLinear`, `axisLeft`, and `axisBottom` for scaling and axes. The SVG circles are rendered with inline styling, using a `setInterval` loop to update the x-axis mapping and redraw the plot.

SSravyaAnnadi
88% match
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
88% match
Loading thumbnail…

Fork of Reusable Scatter Plot- ICE 7

This animated scatter plot visualizes the Iris dataset, cycling through different sepal and petal measurements on the x-axis while keeping petal width on the y-axis. Each species appears as a distinct color—orange, blue, and black—with a custom legend and labels. Built with D3 v6, the visualization uses `d3.csv` to load data, `scaleLinear` and `extent` for scales, and `setInterval` to cycle through measurement columns. Circles are rendered as SVG elements with custom `rx` and `ry` attributes, and axes are drawn using `axisLeft` and `axisBottom`.

Mmandalasaikrishna007
88% 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
88% match
Loading thumbnail…

Fork of ICE7 - Reusable Scatter Plot

This animated scatter plot visualizes the Iris dataset, cycling through four different measurements on the x-axis while the y-axis displays sepal length. Data points are colored by species (setosa, versicolor, virginica), with a legend and axis labels. Built with D3 v6, it uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` from the `d3` module within a reusable `scatterPlot` function, updating points and axes via a `setInterval` timer.

AArruSkywalker
88% match