Skip to main content
SimilarExport ZIP
100%

Scatter plot

✓ Published0🌍 Public
GGangumalla Ruchitha Reddy
Last edited Apr 28, 2024
Created on Apr 28, 2024
Forked from Hello VizHub

This interactive scatter plot visualizes the Iris dataset, displaying different flower measurements on the x and y axes while color-coding each point by species (setosa, versicolor, virginica). The plot cycles through four measurement combinations using a JavaScript interval, updating the axes and animations accordingly. Built with D3.js v6, it leverages `scaleLinear`, `axisLeft`, `axisBottom`, and `scatterPlot` for rendering SVG circles and axes. Data is loaded asynchronously from a remote CSV file, with a custom color legend annotating the three species.

AI-generated description

A demonstration of reusable scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This interactive scatter plot explores the Iris dataset, showing the relationships between four numerical flower attributes across three species. Users switch the X and Y axes via dropdown menus, and an animated transition moves the colored circles to their new positions. The visualization uses D3.js v5 with a modular structure, leveraging `scaleLinear` for axes, `scaleOrdinal` for species colors, and `axisBottom`/`axisLeft` for grid lines. Data loads from an external CSV file, with circles rendered as SVG elements and a legend identifying each species.

Vvegetable.c@nycu.edu.tw
93% match
Loading thumbnail…

Scatter Plot with Iris DataSet

This interactive scatter plot displays the classic Iris dataset, with measurements plotted as colored circles representing three species. Users select which flower attributes appear on the X and Y axes through dropdown menus, automatically triggering an animated transition of the data points to their new positions. The visualization is built with D3 v7, using `d3.select`, `d3.scaleLinear`, `d3.extent`, and `d3.axisBottom`/`d3.axisLeft` to render SVG axes and circles, with a 1-second `transition()` animating the changes. The code applies distinct fill colors for setosa, versicolor, and virginica classes.

SSharon Lin
92% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal length and width for three flower species. Users can select which features to plot on the x- and y-axes using dropdown menus, with points color-coded by species (setosa, versicolor, virginica). The visualization uses D3 v5 to load and parse the CSV data, dynamically render SVG circles and axes with d3.axisBottom and d3.axisLeft, and animate point appearance via transition().duration() with staggered delays.

AAmanda-Tai
91% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, showing measurements like sepal length and petal width while color-coding points by species. Users can select which attribute maps to the X and Y axes using dropdown menus. The visualization uses D3 v5 with SVG rendering and animated transitions, employing `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().duration()` to smoothly reposition circles when axes change.

Mminson
91% match
Loading thumbnail…

Iris Scatter Plot

The visualization shows an interactive scatter plot of the Iris dataset, where users can select which measurements appear on the x- and y-axes via dropdown menus. Points are colored by species (setosa, versicolor, virginica) and animate smoothly to their new positions when the axes change. The chart uses D3 v5’s scaleLinear, axisBottom, and axisLeft to render the plot, with transitions applied to the circle elements for smooth updates.

MMing Chang
91% match
Loading thumbnail…

Scatter Plot

This animated scatter plot visualizes the classic Iris dataset, cycling through four flower measurements every two seconds. D3 version 6.7 scales the data linearly along both axes and renders circles with SVG. The reusable scatter plot module employs D3’s selection join for idempotent updates, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to redraw axes and marks dynamically, demonstrating responsive full-screen visualization.

Mmaddulanagasanjana@gmail.com
91% match
Loading thumbnail…

Scatter Plot

This animated scatter plot visualizes the classic Iris dataset, cycling through four flower measurements every two seconds. D3 version 6.7 scales the data linearly along both axes and renders circles with SVG. The reusable scatter plot module employs D3’s selection join for idempotent updates, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to redraw axes and marks dynamically, demonstrating responsive full-screen visualization.

Mmaddulanagasanjana@gmail.com
91% match
Loading thumbnail…

Scatter plot of Iris

This interactive scatter plot visualizes the Iris flower dataset, showing measurements of sepal and petal length and width for three species. The visualization uses d3.select, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal to render circles colored by species (red for setosa, blue for versicolor, green for virginica) with an opacity of 0.3. Users can dynamically select which measurements to plot on the x and y axes via dropdown menus. The SVG rendering includes grid lines, labeled axes, and a title, with data loaded from a local CSV file.

Wweird_danger
91% match