Fork of Scatter Plot - ICE7_RahulSai

100%

Fork of Scatter Plot - ICE7_RahulSai

✓ Published2🌍 Public

Last edited Mar 29, 2022

Created on Mar 29, 2022

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).

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 Fork of Scatter Plot - ICE7_RahulSai

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.

Kkirangithub23

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

91% 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

90% 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

90% 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

90% match

Loading thumbnail…

Fork of ICE-7 Resuable scatter plot

This animated scatter plot uses the Iris flower dataset to explore relationships between petal and sepal measurements. The code draws colored circles representing three species—green for setosa, indigo for versicolor, and red for virginica—using d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom. Every two seconds, a setInterval callback updates the x-axis mapping to cycle through petal_width, sepal_width, petal_length, and sepal_length, while the y-axis stays fixed on sepal_length. The visualization employs a reusable scatterPlot function that updates existing SVG circles and axes through data joins.

SSaiSreya1

90% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This interactive scatter plot animates through different dimensions of the Iris dataset, cycling the x-axis through petal width, sepal width, petal length, and sepal length. The visualization uses D3.js APIs including `select`, `append`, `attr`, and `join` to render SVG circles and axes, with data loaded via `csv`. A reusable `scatterPlot` module defines the chart structure, while the main script uses `setInterval` to trigger time-based updates. Species are color-coded orange, blue, and black, with a legend for setosa, versicolor, and virginica.

DDeegutla123

89% match

Loading thumbnail…

Fork of ICE-7 Reusable Scatter Plot

This animated scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length, with each point colored by species (setosa, versicolor, or virginica). It cycles through four attribute combinations every two seconds using `setInterval`, updating the x-axis scale via D3's `scaleLinear` and `axisBottom`. The visualization is built with a reusable `scatterPlot` function, leveraging D3 v6 modules like `csv`, `select`, and `extent`, rendered as SVG circles with custom fill colors and axis labels.

SSharmilaChowdhari

89% match