Skip to main content
SimilarExport ZIP
100%

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

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

This example shows an animated scatter plot of the Iris dataset, cycling through four numeric attributes every two seconds. Each point is colored by species (blue, red, or yellow). The visualization uses D3 version 6 features, including `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` to map data coordinates. The reusable `scatterPlot` function updates the x-axis and circle positions via `setInterval`, rendering in SVG on a black background with a white axis and labels.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

The scatter plot visualizes the Iris dataset, with points colored by species (blue, red, yellow) and axes labeled for sepal and petal measurements. It uses D3.js (scaleLinear, extent, axisLeft, axisBottom) to map data to coordinates. An animation cycles the x-axis between four measurement columns every two seconds, dynamically re-rendering the SVG. Data is loaded from a GitHub-hosted CSV file, and the plot is built with a reusable custom scatterPlot component.

SSheshidharreddy
96% match
Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This animated scatter plot from D3.js (v6.7.0) visualizes the classic Iris flower dataset, cycling through four numeric attributes (petal width, sepal width, petal length, and sepal length) every two seconds. Each point represents a flower specimen, colored by species: blue for setosa, red for versicolor, and yellow for virginica. The reusable `scatterPlot` module builds the plot using `scaleLinear`, `axisLeft`, and `axisBottom`, rendering SVG circles with white strokes. The animation employs `setInterval` to reassign the x-axis mapping and redraw the marks, driven by data fetched via `csv` from a GitHub Gist URL.

MMgk1255
94% match
Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This interactive scatter plot visualizes the Iris dataset, showing the relationship between two selected measurements. A small multiples approach animates through four variable pairings (petal width, sepal width, petal length, and sepal length) on the x-axis every two seconds, while data points are colored by species. Built with D3.js, it uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for ticks, and a reusable scatter plot component created with the `scatterPlot` function. The SVG rendering includes colored circles with white outlines, and the animation cycles using `setInterval`.

Ssnehareddygurram
93% match
Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This example displays a scatter plot of Iris flower data, with each point colored by species: blue for setosa, red for versicolor, and yellow for virginica. It uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map petal measurements to coordinates and render axes, while circles are drawn via selection joins with `.attr` for positioning and styling. The plot is built as a reusable function with configurable width, height, margin, and radius, and appears on a black background with white axis labels.

Sshreyasribearelly@gmail.com
92% match
Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This interactive scatter plot visualizes the Iris flower dataset, mapping petal width and sepal length with color-coded species (blue, red, yellow). Built using D3 v6, it employs reusable chart components through `scatterPlot()` with `scaleLinear`, `axisLeft`, and `axisBottom` for axes. The SVG renders animated circles with white strokes, while data is loaded via `d3.csv` from a remote URL. Dynamic resizing adapts to the viewport, and commented code shows potential for cycling through different column pairings over time.

RRadhakrishna246
92% match
Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This animated scatter plot cycles through different iris flower measurements, plotting petal width, sepal width, petal length, and sepal length every two seconds. The visualization uses the D3.js library's `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll` APIs to render SVG circles and axes. Data comes from the classic Iris dataset loaded via D3's `csv` function. Circle colors encode species—blue for setosa, red for versicolor, yellow for virginica—while a black background and white axis labels maintain high contrast throughout the animation.

Eeravellisaimeghana
92% match
Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This interactive scatter plot visualizes the Iris flower dataset, mapping petal width and sepal length on the x- and y-axes. Each circle represents a data point, colored by species (blue for setosa, red for versicolor, yellow for virginica) with white strokes. The visualization uses d3.scaleLinear, axisLeft, axisBottom, and a reusable scatterPlot function built with D3 v6. SVG rendering displays the axes and circles, with the plot dynamically updating when the x-value column cycles through dataset attributes. Data loads from a remote CSV file via d3.csv.

BBajiSharifPatan@my.unt.edu
92% 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
91% match