Scatter plot with controls

100%

Scatter plot with controls

✓ Published0🌍 Public

Last edited May 29, 2023

Created on May 29, 2023

This scatter plot cycles through all possible pairs of the Iris dataset’s four numeric attributes every second, animating the circles and axes between projections. Each point is colored by iris variety (red, blue, or green) using `d3.scaleOrdinal`. The visualization uses `d3.csv` for data loading, `d3.scaleLinear`, `d3.axisLeft` and `d3.axisBottom` for scales, and `transition()` to update the SVG circle positions and axes smoothly.

AI-generated description

My first D3 art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

The scatter plot animates the classic Iris dataset, cycling through all pairs of four measured attributes every second. Each circle represents a flower, colored by species (red, blue, green). A D3 transition smoothly moves points between axis scales while simultaneously updating the left and bottom axes. The visualization uses `d3.csv` for data loading, `d3.scaleLinear` for positioning, `d3.scaleOrdinal` for color mapping, and `d3.axisLeft`/`d3.axisBottom` for rendering the axes.

Tthenlpstudent

92% match

Loading thumbnail…

Animated Reusable Scatter Plot

Animated scatter plot of the Iris dataset cycles through the four measured attributes as x-values every three seconds. The visualization uses D3's scaleLinear, axisBottom, axisLeft, and selection.join to manage entering and exiting circles. D3 transitions with staggered delays animate position changes smoothly. Data loads as CSV via d3.csv.

KKhanAzmat

86% match

Loading thumbnail…

Scatter Plot [interactive] II

An interactive scatter plot of the Iris dataset shows relationships between two selected numeric attributes, with points colored by species. Users can change the x and y axes via dropdown menus powered by React. The visualization uses D3 scales (d3.scaleLinear, d3.scaleOrdinal) to map data to SVG circles, while hovering over the color legend highlights points of a single species. Data is loaded asynchronously from a CSV URL using d3.csv.

Aadewole-top

86% match

Loading thumbnail…

Scatter Plot

An interactive scatter plot of the Iris dataset lets users explore relationships between different measurements. Two dropdown menus dynamically change which numerical columns are plotted on the X and Y axes. The visualization is built with D3.js, using scales for axes and ordinal color mapping for the categorical species. Circles animate into position with a staggered delay, and axes and labels update based on the selected data columns.

Ddaniel

86% match

Loading thumbnail…

Iris Scatterplot 03

This interactive scatter plot animates through the four numerical measurements of the Iris dataset, cycling the x-axis every two seconds while keeping sepal length on the y-axis. D3’s `scaleLinear`, `scaleOrdinal`, and `symbol` APIs render distinct species shapes with axis ticks. The visualization uses `setInterval` and the `scatterPlot` reusable function, processing data loaded via `d3.csv` from a GitHub Gist, with an SVG output.

Gg1g10

86% match

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to compare any two of the four measured flower features via dropdown menus. The plot displays each flower as a semi-transparent circle colored by its species class, with a legend identifying the three types. Built with D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color mapping, and animates points from the center to their positions using a two-second `transition` with staggered delays. The data is loaded from a CSV file, and the interface is rendered as SVG elements.

TToooooooT

85% match

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot displays the Iris dataset, cycling through four different feature pairings on the x-axis—petal width, sepal width, petal length, and sepal length—while keeping sepal length on the y-axis. Each species (setosa, versicolor, virginica) is color-coded with red, green, or blue markers. Built with D3 v6, the visualization uses a reusable `scatterPlot` module with `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while a `setInterval` loop updates the x-value mapping every few seconds. The JSON data is loaded via `d3.csv` and drawn as SVG circles with animated transitions.

AAAL FORHAD

85% match

Loading thumbnail…

Iris Scatter Plot

An interactive scatter plot visualizes the classic Iris dataset, mapping sepal and petal measurements to the x and y axes. The visualization offers two dropdown menus that let users change which flower attribute is displayed on each axis. The code uses D3 v5 to load the CSV data, create linear scales, and render SVG circles that transition to new positions with a one-second animation. Points are colored by iris species (setosa, versicolor, or virginica), with a legend and axis labels rendered via `d3.axisBottom` and `d3.axisLeft`.

Wwinniepooh520

85% match