Skip to main content
SimilarExport ZIP
100%

Reusable Scatter plot Activity 8

✓ Published0🌍 Public
Mmn0658
Last edited Jul 19, 2023
Created on Jul 19, 2023

This animated scatter plot visualizes the Iris dataset, cycling through four feature combinations on the x-axis while sepal length stays on the y-axis. Each species appears as a distinct color (skyblue, lightgreen, orange) with a legend. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and a reusable `scatterPlot` module updated via `setInterval`. SVG circles and text labels render dynamically as axes change every few seconds.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, cycling through four feature combinations on the x-axis every few seconds via setInterval. The visualization uses D3 v6 modules including csv, select, scaleLinear, extent, axisLeft, and axisBottom to render SVG circles colored by species—skyblue for setosa, lightgreen for versicolor, and orange for virginica. A legend and axis labels update dynamically, while the reusable scatterPlot ES6 module encapsulates the chart configuration.

VVinay Vemuri
94% match
Loading thumbnail…

Reusable Scatter plot Activity 8

This example demonstrates an interactive scatter plot of the Iris dataset, cycling through four different feature combinations on the x-axis every few seconds. The visualization uses the D3.js library to render SVG circles colored by species (setosa, versicolor, and virginica). The scatter plot is constructed with a reusable `scatterPlot` module, which defines the axes and data mapping. The animation is driven by a `setInterval` loop that updates the `xValue` property, while the y-axis remains fixed on sepal length.

SSharankumar02
94% match
Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, cycling through different feature combinations on the x-axis every few seconds while keeping petal width on the y-axis. Points are colored by species—skyblue for setosa, lightgreen for versicolor, and orange for virginica—with a legend and axis labels. Built with D3 v6, the reusable `scatterPlot` module uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render scales and axes, while ES6 modules load CSV data from a GitHub gist. The animation leverages `setInterval` to update the x-value mapping and re-render the SVG.

Rrikhitakoganti12
94% match
Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This animated scatter plot displays the Iris flower dataset, cycling through four feature pairings (petal width, sepal width, petal length, and sepal length) on the x-axis while keeping sepal length on the y-axis. Points are colored by species (setosa, versicolor, virginica) using static legend markers. Built with D3 v6, the visualization uses `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` parsing, with a reusable `scatterPlot` module. A `setInterval` triggers axis updates every few seconds, while SVG circles are appended directly to the body with custom `rx` and `ry` attributes.

Mmythripopuri2001@gmail.com
93% match
Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot displays the Iris dataset, showing petal width on the x-axis and sepal length on the y-axis with data points colored by species. Built with D3.js (version 6.7.0) and ES6 modules, the visualization cycles through different feature pairings every few seconds using `setInterval`. The reusable scatter plot component, defined in `scatterPlot.js`, dynamically updates its scales and axes as the data columns change. The animation includes a custom legend and axis labels generated using D3's `axisLeft` and `axisBottom` APIs, rendered as an SVG with HTML styling.

Mmn0658
93% match
Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, cycling through four measurement pairs (petal width, sepal width, petal length, sepal length) on the x-axis while keeping sepal length on the y-axis. Points are colored by species (setosa, versicolor, virginica) with a legend, and axis labels update dynamically. Built with D3.js, the example demonstrates reusable chart modules via `scatterPlot()` with `scaleLinear`, `axisLeft`, and `axisBottom`, and uses SVG rendering with animations driven by `setInterval` to switch between dimensions.

BBhavyaMammai
93% match
Loading thumbnail…

Reusable Scatter Plot

This animated scatter plot visualizes the Iris flower dataset, cycling through four feature combinations on the x-axis while keeping sepal length on the y-axis. Data points are colored by species—orange for setosa, blue for versicolor, and black for virginica—with a dynamic legend that updates alongside axis labels. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, and `axisLeft` within a reusable `scatterPlot` module, driven by `setInterval` to rotate the displayed attribute. The SVG rendering includes custom circle shapes with elliptical radii and a color-coded species legend.

RRupeshGandham
93% match
Loading thumbnail…

Reusable Scatter plot Activity 8

This animated scatter plot of the Iris dataset cycles through four different feature combinations on the x-axis—petal width, sepal width, petal length, and sepal length—while the y-axis remains fixed on sepal length. Points are colored by species (setosa, versicolor, virginica) and switch between elliptical and circular shapes. Built with D3.js (`d3.csv`, `d3.scaleLinear`, `d3.axis`), it updates the plot every few seconds using `setInterval`, re-rendering axes and labels dynamically in SVG. The visualization appears to load data from a GitHub-hosted CSV and includes a custom legend with species names and colors.

Aakshayvenishetty1437
93% match