Skip to main content
SimilarExport ZIP
100%

Iris_Scatter

✓ Published1🌍 Public
ZZeroKurosakii
Last edited Sep 25, 2023
Created on Sep 25, 2023
Forked from Hello VizHub

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements of sepal length, sepal width, petal length, and petal width as colored points representing three species. Users can select which measurement appears on each axis via dropdown menus, with smooth animated transitions updating the axes and point positions. The visualization uses D3.js v7, including d3.csv for data loading, d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, and d3.transition for animated updates. Each species receives a distinct color: red for setosa, green for versicolor, and blue for virginica.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Iris

This interactive scatterplot visualizes the Iris flower dataset, plotting sepal and petal measurements against each other. Users select the x and y axes from dropdown menus, and the points animate smoothly to their new positions with staggered transitions. The visualization encodes the three Iris species with red, green, and blue semi-transparent circles. Built with D3 v7, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` to handle scaling, axes, and animated updates when the selected columns change.

ZZeroKurosakii
94% match
Loading thumbnail…

iris

This interactive scatter plot visualizes the Iris flower dataset, letting users select which measurements (sepal length/width, petal length/width) map to the x- and y-axes via dropdown menus. It colors each point by species (setosa, versicolor, virginica) using a d3.scaleOrdinal with red, blue, and green, and includes a legend. Built with D3 v5, the visualization renders as SVG with animated transitions that grow circles from a central point over two seconds. It uses d3.csv to load data, d3.scaleLinear for axes, and d3.axisLeft/axisBottom with gridlines.

Iianjwo
94% match
Loading thumbnail…

Iris Scatter Plot-0616053

This interactive scatter plot explores the classic Iris flower dataset, showing measurements of sepal and petal dimensions. It visualizes data points for three Iris species, color-coded to distinguish between setosa, versicolor, and virginica. Users can select which feature to plot on the x- and y-axes using dropdown menus. The visualization is built with d3.v5, using d3.csv to load data, d3.scaleLinear for axis scaling, and d3.axisBottom and d3.axisLeft for chart axes. The svg renders semi-transparent circles, with a legend indicating species colors.

Nnomiaro
94% match
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot displays the Iris dataset, showing measurements of sepal and petal length and width. Users can select which measurement appears on the x-axis and y-axis via dropdown menus. The visualization uses d3.scaleLinear for axis scaling and d3.axisLeft and d3.axisBottom for axes, with circles animated via transition().duration() and delay(). Colors are assigned to species using d3.scaleOrdinal with a manual color range, and a legend is drawn with SVG rectangles and text. Data loads from a CSV URL, and rendering uses SVG with 2-second animated transitions.

Wwaterm80
94% match
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing relationships between sepal and petal measurements for three flower classes. Users can dynamically select which measurement appears on each axis via dropdown menus, with points colored by species (setosa, versicolor, virginica). Built with D3 v5, the visualization uses d3.csv for data loading, scaleLinear for axis scaling, and axisBottom/axisLeft for rendering gridlines. The render function rebuilds the SVG scene on each axis change, updating scales and redrawing circles accordingly.

LLockingChiao
94% match
Loading thumbnail…

109550057_Iris Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species: setosa, versicolor, and virginica. The visualization uses dropdown menus to dynamically select which measurement appears on the x- and y-axes, with each species distinguished by color and labeled in a legend. The code employs D3 v5’s `select`, `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to load data, render SVG circles, and update the chart upon user selection. Data comes from the classic Iris dataset, presented as an SVG with semi-transparent points.

Jjasonlovechu
93% match
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot displays the classic Iris dataset, showing relationships between sepal and petal measurements across three iris species. Users can dynamically select which measurements to plot on the x- and y-axes through dropdown menus. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisBottom`, and `axisLeft` for axes, while data points transition smoothly via `transition().duration(1000)`. Each species is color-coded—red, green, or blue—and a legend identifies the classes.

Cchungmin-yu
93% match
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, showing measurements of sepal and petal length and width across three species. Users can dynamically select which measurement appears on the x-axis and y-axis using dropdown menus. The visualization uses D3.js v5 with SVG rendering, employing `scaleLinear` for axes, `scaleOrdinal` for color mapping, and `axisBottom` and `axisLeft` for ticks. The data is loaded via `d3.csv` and rendered as semi-transparent circles colored by species class.

Cchungmin-yu
93% match