Skip to main content
SimilarExport ZIP
100%

Akhila

✓ Published0🌍 Public
Aakhila157
Last edited Mar 26, 2023
Created on Mar 21, 2023

This animated scatter plot visualizes the Iris dataset, encoding petal width and sepal length along the axes and distinguishing species by color and symbol shape. Points cycle through different measurement columns every ten seconds using `setInterval`, updating the x-axis scale and data bindings via d3 joins. The visualization uses d3’s `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisBottom`/`axisLeft` APIs, loading CSV data from a GitHub gist. Additional HTML/CSS legend boxes label species with blue, green, and orange swatches.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable Scatter Plot

This reusable scatter plot displays the Iris dataset, mapping petal and sepal measurements against each other while coloring each point by species. Constructed with D3 6.7.0's `scaleLinear`, `axisLeft`, and `axisBottom` APIs, the visualization animates by cycling the x-axis through different measurement columns every two seconds using `setInterval`. Circles are rendered as SVG elements with per-species colors (green, indigo, red), and the plot is fully parameterized via a custom `scatterPlot` function for flexible reuse.

AAkhila-Battula
87% match
Loading thumbnail…

Akshitha Rapala - ICE -7 Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, cycling through four flower measurements as the x-axis every two seconds while the y-axis remains fixed on sepal length. Built with D3.js v6, it uses reusable chart patterns via `scatterPlot()`, `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The animation, driven by `setInterval`, updates the x-value accessor and re-renders the chart, showing how petal width, sepal width, petal length, and sepal length distribute against sepal length. Data loads from a remote CSV using `d3.csv`.

Aakshitha.rapala@gmail.com
86% match
Loading thumbnail…

Reusable Scatter Plot for Iris Data

A reusable scatter plot displays the Iris dataset by mapping petal width to the x-axis and sepal length to the y-axis, with species represented by distinct symbols. Built with D3.js, the chart uses `scaleLinear`, `scaleOrdinal`, and `symbol` to generate SVG paths, while `axisLeft` and `axisBottom` render labeled axes. The visualization adapts to the browser window size and loads data from a remote CSV file.

Aakhila157
85% match
Loading thumbnail…

Scatter Plot for Iris dataset

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal length for 150 iris flowers. Each point represents a flower, with its position determined by the `scaleLinear` mappings for the x and y axes. The visualization uses D3 v6 with an SVG rendering approach, loading data from a CSV file via `d3.csv`. Axis ticks and labels are rendered using `axisBottom` and `axisLeft`, while custom text elements label the axes as "Petal Length" and "Sepal Length."

AAkhila-Battula
85% match
Loading thumbnail…

Iris dataset scatter plot

This interactive scatter plot visualizes the Iris dataset, mapping measurements like petal width and sepal length across three flower species. Using D3.js with an SVG rendering and animation, the chart automatically cycles through different x-axis variables every 15 seconds, updating the visualization via a reusable scatterPlot function. The code employs d3.scaleLinear for axes, d3.scaleOrdinal for symbol types, and d3.symbol to render distinct species markers, with data loaded asynchronously from a CSV source.

Ggayathrikavya
84% match
Loading thumbnail…

Activity6_Task3.1

This scatter plot shows the relationship between sepal length and petal length for three iris species, using distinct symbol shapes to encode species identity. The visualization includes labeled axes and a legend that maps species names to their corresponding shapes. Built with D3 v7, the code uses `scaleLinear` for positional encodings, `scaleOrdinal` with `symbolsFill` to assign shapes, and `symbolGenerator` to render marks. Data is loaded asynchronously from a CSV file containing the classic iris dataset, parsed with `csvParse` before numeric fields are converted.

Aakhilasannayila@gmail.com
84% match
Loading thumbnail…

ass 9

An animated scatter plot of the Iris dataset cycles through four measurement pairs on the x-axis while keeping petal width on the y-axis, coloring points by species. Using D3's `csv` loader and `scaleLinear`, the visualization animates with `setInterval`, re-binding scales to chosen columns and redrawing axes via `axisBottom` and `axisLeft`. SVG circles are joined to data, with legend and labels added manually. The animation switches x-axis attributes among petal width, sepal width, petal length, and sepal length, updating the chart each second.

Rrahulsiddartha14@gmail.com
84% 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
84% match