Skip to main content
SimilarExport ZIP
100%

Iris

✓ Published0🌍 Public
ZZhou180
Last edited Nov 29, 2020
Created on Oct 20, 2020
Forked from Hello VizHub

This example visualizes the classic Iris dataset as a scatter plot, with dropdown menus that allow the user to select which of the four flower measurements appears on the x-axis and y-axis. Clicking the confirmation button updates the chart, recalculating the linear scales and redrawing the circles. The SVG rendering is built with React and D3 v5, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for axes. Points are colored by species (red, green, blue) and the chart includes labeled axes and gridlines.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Iris visualize

This interactive scatterplot displays the classic Iris flower dataset, allowing users to compare any two of the four measured features—sepal length, sepal width, petal length, and petal width—by selecting them from dropdown menus. Each of the 150 flowers is rendered as a semi-transparent circle colored by species, with a legend identifying the three Iris classes. Built with React and D3 v5, the visualization uses `d3.csv` to load the data, `d3.scaleLinear` and `d3.extent` to compute scales, and `d3.axisBottom` and `d3.axisLeft` for the axes. A `change` event listener re-renders the plot whenever the axis selections change.

Pplchao
92% match
Loading thumbnail…

Iris_Scatter

This interactive scatter plot visualizes the Iris dataset, showing relationships between four flower measurements (sepal length/width, petal length/width) across three species. Users select which attributes to plot on the x- and y-axes via ReactDropdown menus, with points colored by species. Hovering over the color legend highlights one species while fading the others. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and SVG circles, with axes rendered as custom tick components.

Eexchoco
90% match
Loading thumbnail…

Iris analysis

This interactive scatter plot lets users explore the classic Iris dataset by switching which four measurements appear on the x- and y-axes via dropdown menus. The visualization renders 150 points as semi-transparent circles, colored by iris species (setosa, versicolor, virginica), with a custom legend. Built with D3 v5, it uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and a reusable `dropDownMenu` module, rendering to SVG. Axes include grids and labels, with the chart redrawing entirely on each menu selection.

Ppychen01
90% match
Loading thumbnail…

Iris Scatter Plot v4

This interactive scatter plot displays the classic Iris dataset, plotting sepal and petal measurements for three flower species. Users can change the x- and y-axis variables via React dropdown menus, with each species consistently colored using a d3.scaleOrdinal mapping to teal, purple, and orange. The visualization leverages React state hooks for dynamic updates, d3.csv for data loading, and d3.scaleLinear for axis scaling. Custom React components render SVG axes and circle marks with native tooltips.

JJohn Lewis
90% match
Loading thumbnail…

Iris

This example visualizes the classic Iris dataset, plotting sepal length against sepal width as a scatter plot. Each circle represents a single iris flower, with the chart designed to reveal the distribution and clustering of measurements across species. The visualization is built using React for component structure and D3.js v7 for the SVG rendering and axis generation. The data is loaded asynchronously from a CSV file hosted online, with d3.csv fetching and parsing the raw values. Axes are created using d3.axisBottom and d3.axisLeft, while the plot area is scaled with d3.scaleLinear. The appearance follows a custom configuration that sets dark text and light grid lines for readability.

TTarun Kumar Bosupally
90% match
Loading thumbnail…

Iris_HW1

This interactive scatter plot of the Iris Dataset allows users to choose which flower attributes appear on the x- and y-axes via dropdown menus. The visualization renders circles for each iris sample using SVG, with axes and ticks generated by custom components that leverage `d3.scaleLinear` and `d3.extent`. The code uses `d3.csv` to load data from a remote URL and defines tick marks with `AxisBottom` and `AxisLeft` components. The chart's marks include tooltips, and the UI is built with React and `react-dropdown`.

JJoshuoYang
90% match
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot displays the classic Iris dataset, allowing users to compare any two measurements (sepal and petal length or width) by selecting them from dropdown menus. The visualization uses D3v5's `scaleLinear` and `extent` to compute axes, with a smooth 1-second transition between selections. Points are colored by Iris species (setosa, versicolor, virginica) using red, green, and blue, and the chart includes axis labels, gridlines, and a legend. The React-based code fetches data from a CSV file via `csv` and renders using SVG.

CChiuyc
90% match
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, showing measurements of sepal and petal dimensions colored by flower species. Users can select which attributes to display on the x- and y-axes using dropdown menus, with hover interactions fading non-selected species. Built with React and D3 v5, it renders SVG circles using `scaleLinear` and `scaleOrdinal` for positioning and color encoding. The visualization includes custom axis components, a color legend, and tooltips, with data loaded via D3's `csv` parser and formatted using `d3.format`.

TThe-World-Muda
90% match