Skip to main content
SimilarExport ZIP
100%

STarda - Activity 9

✓ Published0🌍 Public
SSamir Tarda
Last edited May 5, 2024
Created on May 5, 2024
Forked from Hello VizHub

This example demonstrates an animated scatter plot of the Iris dataset, cycling through different feature pairs on the x-axis while displaying species as colored points. The visualization uses D3 v6, loading data via CSV and rendering with SVG. A reusable scatter plot module built with `scaleLinear`, `axisLeft`, and `axisBottom` updates axes and circles at intervals. The code also includes custom legends, axis labels, and styling through external CSS and Google Fonts.

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…

Fork of Activity 7.1

This animated scatter plot displays the Iris dataset, using D3 v6 to cycle through different feature pairings on the x-axis every few seconds. The visualization, rendered as SVG, maps sepal and petal measurements to point positions, with species color-coded (sky blue, light green, and orange). It demonstrates a reusable scatter plot module, using functions like `scaleLinear`, `extent`, and `axisLeft` from D3, while the `setInterval` timer updates the displayed columns, with axis labels and legend text reflecting the current selection.

Bbhavanadupati3@gmail.com
84% match
Loading thumbnail…

Activity 9

This animated scatter plot displays the Iris dataset, cycling through different x-axis attributes (petal width, sepal width, petal length, sepal length) at intervals. It color-codes points by species (setosa, versicolor, virginica) with a legend and updates axis labels accordingly. The visualization uses D3 v6, loading data via `d3.csv`, and constructs the chart with a custom reusable `scatterPlot()` function that leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. SVG elements, including circles and text, are manipulated through `selectAll` and `join` for smooth transitions.

DDouglas mochama
83% match
Loading thumbnail…

Activity 7 tutorial

This animated scatter plot explores the classic Iris dataset, cycling through four different feature pairings on the x-axis while y-axis remains sepal length. Built with D3.js 6.7.0, it demonstrates a reusable scatter plot module using scaleLinear, axisLeft, and axisBottom APIs. The visualization shows species-colored points (setosa, versicolor, virginica) with a static legend, and dynamically updates axes and labels via setInterval. The rendering uses SVG with custom styling, including italic axis labels and a bold title overlay.

Aanisha.peddireddy@gmail.com
83% match
Loading thumbnail…

Activity 9

This visualization displays the Iris dataset as an animated scatter plot, cycling through different feature pairs for the x-axis on an interval. It shows the relationships between various sepal and petal measurements, with each species (setosa, versicolor, virginica) color-coded. The plot, built with D3.js and a reusable `scatterPlot` module, updates dynamically using `setInterval`, re-rendering SVG circles with colors and labels. It demonstrates how to create a modular, animated plot with `d3.csv`, `scaleLinear`, and `axisBottom`/`axisLeft` APIs.

HHarshita Vairagade
83% match
Loading thumbnail…

Activity9&10

This animated scatterplot displays the Iris dataset, cycling through four different feature pairs to reveal relationships between sepal and petal measurements. The visualization loads data via d3.csv and uses a custom scatterPlot() function built with d3.scaleLinear, axisBottom, and axisLeft to render axes. Circles are colored by species using a switch statement, with a legend and labels added manually. The setInterval function cycles through columns to update the x-axis mapping, while SVG text and circle elements dynamically update to reflect the current dimensions.

Ssahaspragna6@gmail.com
83% match
Loading thumbnail…

Fork of Activity 7

This animated scatter plot visualizes the Iris dataset, cycling through four feature pairs on the x-axis while keeping petal width on the y-axis. It uses D3.js v6.7.0 to load CSV data via `d3.csv` and render SVG circles colored by species. The visualization employs `d3.scaleLinear` for axes, a `setInterval` callback to rotate through column selections, and custom legend labels. The code includes a `scatterPlot` factory function with configurable accessors and margin settings.

Jjaswanthreddy2715@gmail.com
83% match
Loading thumbnail…

Activity 9&10

This interactive scatter plot displays the Iris dataset, cycling through different feature pairs on the x-axis (petal width, sepal width, petal length, and sepal length) every few seconds while the y-axis remains sepal length. Data points are colored by species (setosa, versicolor, virginica) using D3.js to render the SVG visualization, with custom axis labels, a legend, and a title. The code leverages D3's `scaleLinear`, `axisLeft`, and `axisBottom` APIs within a reusable scatter plot module, and uses `setInterval` to animate the changing axes. Data is loaded via D3's `csv` function from a remote GitHub Gist.

Ssumanthnaidu213@gmail.com
83% match
Loading thumbnail…

activity9and10

This animated scatterplot displays the Iris flower dataset, cycling through four variable pairings to show relationships between sepal and petal measurements. Each species is color-coded, with a legend and rotating axis labels updating every few seconds. The visualization uses D3 v6 modules like `scaleLinear`, `axisLeft`, and `axisBottom` via `scatterPlot.js`, with `setInterval` driving the animation. It loads CSV data from a GitHub gist, renders as SVG, and demonstrates ES6 imports for reusable chart components.

AAbdul Kareem
83% match