Fork of Iris Data Scatter Plot

100%

Fork of Iris Data Scatter Plot

✓ Published0🌍 Public

Last edited Sep 25, 2023

Created on Sep 25, 2023

This scatter plot visualizes the classic Iris dataset, showing measurements of sepal and petal dimensions. Users can dynamically select which attributes to plot on the X and Y axes via dropdown menus. The visualization is built with D3 version 7, which draws an interactive SVG scatter plot. Data points are embedded directly in the JavaScript code, and the plot is redrawn from scratch whenever the user changes the selected axes.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal length, sepal width, petal length, and petal width. Users can dynamically select which numerical attribute appears on the X and Y axes via HTML dropdown menus, with points colored by iris species (setosa, versicolor, virginica). The visualization uses D3 v7 with SVG rendering, implementing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. The chart redraws its axes and circles whenever a different attribute is chosen, with the y-axis dropdown preventing selection of the same attribute as the x-axis.

RRachel Chen

94% match

Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which measurement appears on the x- and y-axes. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and gridlines, while data points are drawn as SVG circles with color-coded species and an accompanying legend. When the axes change, the circles smoothly transition to their new positions using D3's `transition()`.

HHaowenWeiJohn

94% match

Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, displaying the relationship between two user-selected measurements (sepal length/width or petal length/width) on the x- and y-axes. Colored circles represent the three Iris species (setosa, versicolor, virginica) using a categorical color scale. The D3.js code builds the chart with `scaleLinear` and `scaleOrdinal` for scaling, `axisLeft` and `axisBottom` for axes, and dropdown menus trigger redraws via event listeners. Data is loaded from a CSV file, and points are rendered as SVG circles.

Aaddword527

94% match

Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to dynamically select which sepal or petal measurements to plot on the x- and y-axes via dropdown menus. Dots representing individual flowers are color-coded by species (setosa, versicolor, virginica). The visualization is built with D3 v5, using `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, and employs smooth `transition().duration(1000)` animations to transition points between axis configurations.

Nnutmegsashimi

93% match

Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to compare any two of four flower measurements (sepal/petal length/width) via dropdown menus. Points are color-coded by species, with a legend and animated transitions (using D3’s `transition().duration(1000)`) when axes change. The visualization uses D3 v5 to load CSV data, compute linear scales, render SVG axes with `axisBottom` and `axisLeft`, and bind data to circles. Animated positional updates highlight distribution differences between flower classes.

YYi-Qing

92% match

Loading thumbnail…

Fork of Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements of sepal and petal dimensions across three species. Users can dynamically select which measurement appears on each axis through dropdown menus, with the chart redrawing to reflect the new configuration. The visualization uses D3.js v7 with SVG rendering, employing d3.scaleLinear for scales, d3.axisBottom and d3.axisLeft for axes, and d3.scaleOrdinal for color coding by species. The code loads data from a CSV file and includes a legend identifying the three species.

VVinod Pahuja

92% match

Loading thumbnail…

Fork of Scatter Plots

This interactive scatter plot visualizes the Iris Dataset, displaying measurements of sepal and petal dimensions. Users can dynamically select which variables to map to the x- and y-axes via dropdown menus. The visualization updates the scatter plot, axes, and labels accordingly. Data points are colored by iris species using a static color mapping. The implementation uses d3.scaleLinear for axis scaling, d3.extent to compute data domains, d3.axisBottom and d3.axisLeft for axes, and React dropdowns for the interactive controls, all rendered as SVG elements.

Jjas0821

92% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This scatter plot visualizes the classic Iris Dataset, mapping petal length and width on the axes and coloring each point by species (setosa, versicolor, or virginica). It uses D3 v6 to load CSV data, parse numeric fields, and render an SVG with circles. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while `d3.scaleLinear` and `d3.extent` set the scales. Although the circles carry extra sepal length and width attributes, only the petal dimensions are visible in the plot.

SSreekarveeravelly

92% match