Fork of 0

100%

✓ Published1🌍 Public

Last edited Sep 15, 2024

Created on Sep 14, 2024

Forked from 0

This interactive D3.js scatter plot visualizes the classic Iris dataset, showing measurements of sepal and petal dimensions for three species. Users can change the X and Y axes using dropdown menus, instantly re-projecting the data. The visualization uses `d3.scaleLinear` for axis scaling and `d3.axisBottom` and `d3.axisLeft` for tick marks and grid lines. Points animate from the plot’s center using D3’s `.transition().duration(1500).delay((d, i) => i * 10)` and are colored by species via the `.style('fill', (d) => color(d.class))` mapping, creating a dynamic, reconfigurable view of multidimensional plant data.

AI-generated description

scatter plot

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Fork of 2222333

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements of sepal and petal dimensions. Users can dynamically select which measurement appears on the X or Y axis via radio buttons. The visualization encodes the three Iris species—setosa, versicolor, and virginica—using semi-transparent red, green, and blue colors. Built with D3 v4, the plot uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color mapping, and re-renders the SVG plot on each axis change.

Eeyxxr1260@gmail.com

91% match

Loading thumbnail…

Fork of Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing how sepal and petal measurements relate across three flower species. Users select which measurement maps to the X and Y axes via dropdown menus, with points color-coded by species and animated transitions when selections change. Built with D3 v5, it uses `csv()`, `scaleLinear()`, `axisBottom()`, `axisLeft()`, and `transition().duration()` to render SVG circles and axes.

Aalan489671

91% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing petal width against sepal length with points colored by species. Built with D3 v6, the visualization cycles through different variable pairings every two seconds using a reusable chart pattern. The SVG marks use the `d3.scaleLinear` and `d3.scaleOrdinal` APIs, with axes generated by `axisBottom` and `axisLeft`. A legend identifies the three species, while a `setInterval` loop updates the x and y value functions to animate through the dataset’s four numeric columns.

MMar-99

90% 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

90% 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

90% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This interactive scatter plot explores the Iris dataset, visualizing relationships between petal and sepal measurements across three flower species. The visualization cycles through different variable pairings every two seconds, updating the axes and point positions accordingly. Built with reusable D3 components, it leverages `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `extent` from D3 6.7.0, using SVG rendering with animated transitions and a color-coded legend for species identification.

MMar-99

90% match

Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three iris species. The visualization uses dropdown menus to dynamically switch which attribute is mapped to the x-axis and y-axis, with axes and labels updating accordingly. Built with D3 v5 and React, the example uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render SVG circles colored by species, with gridlines and axis labels providing clear context for the selected variables.

JJyothicherukuri

90% match