Skip to main content
SimilarExport ZIP
100%

Activity 7 Tutorial

✓ Published0🌍 Public
KKhushi Desai
Last edited Nov 2, 2024
Created on Nov 2, 2024
Forked from Hello VizHub

This example visualizes the Iris dataset as an animated scatterplot, cycling through four flower measurements as x-axis values while keeping sepal length on the y-axis. Points are colored by species (Setosa, Versicolor, Virginica) with matching legend markers. The animation cycles through petal width, sepal width, petal length, and sepal length every few seconds. The code uses D3 v6 modules, including `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `extent`, with a reusable scatter plot function and ES6 module imports. The SVG renders with custom labels, a color legend, and axis titles that update per iteration.

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…

Activity-7 Tutorial

This animated scatter plot cycles through four Iris flower measurements—petal width, sepal width, petal length, and sepal length—as the x-axis every five seconds, using D3 scales and axes. The visualization loads CSV data via d3.csv, renders points as SVG circles with d3.scaleLinear and extent, and updates the axis through setInterval. A color-coded legend distinguishes the three species, while axis labels and a title appear as SVG text elements.

Aabjalshaik02@gmail.com
95% match
Loading thumbnail…

Activity7 Tutorial

This animated scatter plot cycles through different Iris flower measurements, switching the x-axis dimension every few seconds while keeping sepal length on the y-axis. Data points are color-coded by species (setosa, versicolor, virginica) with a legend and title displayed on screen. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `setInterval` to update the visualization, reading the CSV dataset from a GitHub gist and rendering as SVG.

SSai Gottumukkala
94% match
Loading thumbnail…

Activity-7 Tutorial

This animated scatterplot cycles through four Iris flower measurements, plotting petal width, sepal width, petal length, and sepal length on the x-axis while sepal length remains on the y-axis. The visualization uses D3.js modules imported via UNPKG, including `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` for data parsing, with a custom `scatterPlot` function handling the SVG rendering. Circles are color-coded by species—lightblue for setosa, lightgreen for versicolor, and orange for virginica—with a legend and axis labels updated every two seconds via `setInterval`. The code demonstrates local ES6 module imports and dynamic chart reconfiguration with smooth transitions.

Aabjalshaik02@gmail.com
94% match
Loading thumbnail…

activity 7 tutorial

This animated scatter plot visualizes the Iris flower dataset, cycling through different pairings of sepal and petal measurements on the x-axis every few seconds while petal width and sepal length remain on the y-axis. Data points are color-coded by species (setosa, versicolor, virginica) with a legend and rotating axis labels. Built with D3.js v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and `setInterval` to update the plot dynamically. The SVG renders circles with custom fill colors and includes a reusable `scatterPlot` module for configuration.

Ssudheervnarasimha1@gmail.com
93% match
Loading thumbnail…

Activity 7 tutorial

This interactive scatterplot animates through different pairings of the Iris flower dataset’s measurements, cycling its x-axis among petal width, sepal width, petal length, and sepal length while keeping sepal length on the y-axis. Using D3 version 6, it builds a reusable scatter plot via the `scatterPlot` module, which employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG axes and circles. A `setInterval` updates the x-value accessor, and custom legend labels, colored by species (setosa, versicolor, virginica), are drawn alongside the animated transitions.

Vvishnutejareddyambati@my.unt.edu
93% match
Loading thumbnail…

Activity7.1_Tutorial

This animated scatter plot cycles through different iris flower measurements from the classic Iris dataset. It displays petal width on the x-axis against sepal length on the y-axis, with points colored by species (setosa, versicolor, virginica). The visualization updates every few seconds, changing which measurement is plotted on the x-axis. Built with D3.js (v6.7.0), it uses the `scaleLinear`, `axisLeft`, and `axisBottom` APIs within a custom `scatterPlot` module. The SVG rendering includes axis labels, a color legend, and a title, with all data loaded from a remote CSV file.

Ssagipavan2385@gmail.com
93% match
Loading thumbnail…

Activity_7.1

This animated scatter plot visualizes the Iris dataset, cycling through four flower measurements (petal width, sepal width, petal length, sepal length) on the x-axis while keeping sepal length on the y-axis. Each species is color-coded with a legend. The visualization uses D3 v6 (d3.csv, d3.scaleLinear, d3.axisLeft, d3.axisBottom) to render SVG circles that update on a setInterval timer. Data is loaded from a GitHub-hosted CSV file, with the axes and plot redrawing for each dimension cycle.

PPreethamreddyannavaram@my.unt.edu
93% match
Loading thumbnail…

Activity 7 tutorial

This interactive scatter plot visualizes the Iris flower dataset, animating through different combinations of sepal and petal measurements. The visualization cycles through four variable pairings every few seconds, with points colored by species (setosa, versicolor, virginica) and accompanied by a legend and axis labels. Built with D3 v6, it uses `d3.csv` for data loading, `scaleLinear` and `axisLeft`/`axisBottom` for scales and axes, and `setInterval` to trigger re-renders of the reusable `scatterPlot` function.

Ccharanshiva769@gmail.com
93% match