Skip to main content
SimilarExport ZIP
100%

D3 Scatter Plot using iris data set

✓ Published4🌍 Public
Vvidhyanamini
Last edited Mar 28, 2022
Created on Mar 28, 2022

This example shows an animated scatter plot of the Iris dataset, visualizing the relationship between petal width and sepal length for three flower species. Using D3.js version 6.7.0, the plot renders as an SVG and automatically cycles through different x-axis variables every 15 seconds. The implementation uses D3’s scaleLinear, axisBottom, axisLeft, scaleOrdinal, and symbol functions within a reusable scatterPlot chart component. Data loads from a CSV file and displays points as varied symbols representing species, with a custom Share Tech font styling the axes.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

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
94% match
Loading thumbnail…

D3 Scatter Plot

This D3.js scatter plot visualizes the Iris dataset, showing different flower measurements as points across a continuous animation. The chart cycles through four attribute combinations—petal width, sepal width, petal length, and sepal length—every two seconds, smoothly re-rendering axes and circles via the `scatterPlot` reusable chart API. It uses d3's `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and SVG `join` operations for declarative updates, while styling text with the Share Tech font.

DDINESH SAI BOPPANA
93% match
Loading thumbnail…

D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, mapping petal length and sepal width while coloring each point by species (setosa, versicolor, or virginica). The visualization cycles through four attribute combinations every two seconds using `setInterval`, updating the x-axis and circle positions accordingly. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, with SVG circles rendered via `selectAll` and `join`. The code also includes manually appended axis labels and a custom color scheme.

RRaja Srinivas Nelluri
91% match
Loading thumbnail…

D3 Scatter Plot-Likith

This interactive scatter plot visualizes the Iris Dataset, initially mapping petal length against sepal length with points colored by species. The visualization updates every two seconds, cycling through different attribute combinations (petal width, sepal width, petal length, sepal length) for the x-axis. Built with D3.js, it uses `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and a reusable scatter plot module. The SVG chart includes labeled axes, a title, and animated transitions between views.

Llikith1266
91% match
Loading thumbnail…

D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions across three flower species. The visualization cycles through four different attribute combinations every two seconds, automatically updating the x-axis to show petal width, sepal width, petal length, and sepal length in sequence. Built with D3 v7, the example uses d3.scaleLinear for coordinate mapping, d3.axisLeft and d3.axisBottom for axes, and SVG circle elements for data points, with the scatterPlot function handling the chart configuration.

TTehran Mammadov
91% match
Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length as the primary axes while encoding species by color. The visualization cycles through different column pairings every two seconds using `setInterval`, animating the axes and circle positions. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, alongside SVG circles and custom labels. The chart is rendered on a full-window SVG, with data loaded via `d3.csv` from a remote GitHub gist.

RRaja Srinivas Nelluri
91% match
Loading thumbnail…

D3 SCATTER PLOT

This interactive scatter plot visualizes the Iris Dataset, displaying four flower measurements. A D3 v6 reusable chart module animates between different axes every two seconds, cycling through petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length on the y-axis. The plot uses d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft, rendering circles with SVG. Raw CSV data is fetched via d3.csv, with the entire figure dynamically resizing to the viewport.

NNaimisha-M
91% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, comparing petal length against sepal length for individual flowers. Built with D3 v6, the SVG rendering uses `scaleLinear` to map data extents to pixel coordinates, with `axisLeft` and `axisBottom` generating labeled axes. Circles are joined to the data via `selectAll().data().join()`, while margins and full-window dimensions position the chart. The code asynchronously loads the comma-separated values using `csv` and parses numeric fields before plotting.

Vvidhyanamini
91% match