Skip to main content
SimilarExport ZIP
100%

Fork of Fork of fork of fork of iCE - 7 Reusable Scatter Plot

✓ Published0🌍 Public
DDivyaVellanki
Last edited Mar 28, 2022
Created on Mar 28, 2022

This animated scatter plot cycles through four different pairings of Iris flower measurements, visualizing the classic Iris dataset from a CSV file. Colored dots represent three species—setosa in blue, versicolor in red, and virginica in yellow—with white outlines for clarity. Every two seconds, the plot switches which petal or sepal dimension is mapped to the x-axis while the y-axis remains sepal length. The implementation uses D3.js modules like `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, with a reusable `scatterPlot` function driving the SVG rendering and updates.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of iCE - 7 Reusable Scatter Plot

This scatter plot animates through four Iris flower measurements (petal width, sepal width, petal length, and sepal length) every two seconds, swapping which variable appears on the x-axis while keeping sepal length on the y-axis. Each point is colored by species (blue, red, or yellow) with white outlines, rendered as SVG circles. The visualization uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll(...).join(...)` within a reusable `scatterPlot` module. Data comes from a CSV of the classic Iris dataset, loaded via `d3.csv`.

DDivyaVellanki
96% match
Loading thumbnail…

Fork of Fork of fork of iCE - 7 Reusable Scatter Plot

This example shows an animated scatter plot of the Iris dataset, cycling through different pairs of flower measurements every two seconds. Data points are colored by species (blue, red, yellow) and rendered as SVG circles with white strokes. The visualization uses D3 v6 modules including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to compute scales and draw axes, while a reusable `scatterPlot` function manages the chart configuration and updates. The code loads data from a CSV file hosted on GitHub and animates by changing the x-axis variable in a `setInterval` loop.

DDivyaVellanki
95% match
Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot

This animated scatter plot cycles through the four measurements of the Iris dataset, re-mapping the x-axis every two seconds to show different pairwise relationships. Built with D3.js, it uses a reusable `scatterPlot` function that leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles. The SVG visualization color-codes each species—setosa, versicolor, and virginica—in blue, red, and yellow, with a black background and white strokes.

DDivyaVellanki
94% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot cycles through different Iris flower measurements on the x-axis, using petal and sepal dimensions from the classic Iris dataset. The visualization uses D3 v6 to render colored circles for each species, with blue, orange, and green representing setosa, versicolor, and virginica. The plot rotates through four variable combinations at intervals, updating axis labels and titles accordingly. D3's scaleLinear, axisLeft, and axisBottom functions handle scaling and axis generation, while the data loading and SVG rendering are managed through d3.csv and the select API.

SSohilaBheemReddy
94% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot displays the Iris flower dataset, cycling through four different feature pairings on the x-axis every few seconds to highlight relationships between sepal and petal measurements. Circles represent individual flowers, colored by species (Setosa in orange, Versicolor in blue, Virginica in black), with a fixed legend. Built with D3 v6, it reuses a custom `scatterPlot` module that applies `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while `setInterval` triggers updates and re-renders the SVG elements.

Rrkhan22
93% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot cycles through different combinations of Iris flower measurements, displaying sepal and petal dimensions on the x- and y-axes. The visualization uses D3 v6 to render circles colored by species (setosa, versicolor, virginica) with a custom legend, while a `setInterval` triggers updates to the axis scales and labels. Data comes from a CSV of the classic Iris dataset loaded via `d3.csv`. The code leverages reusable chart patterns from `scatterPlot.js` with `scaleLinear`, `axisLeft`, and `axisBottom` APIs, alongside a fixed y-axis label for sepal length.

RRupeshGandham
93% 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
92% 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
92% match