HW01-Iris

100%

✓ Published0🌍 Public

Last edited Sep 18, 2023

Created on Sep 18, 2023

This interactive scatterplot explores the classic Iris dataset, displaying the relationships between sepal and petal measurements. Users can select any combination of the four attributes for the X and Y axes using radio buttons, and the visualization updates accordingly. The three Iris species are distinguished by color: purple, magenta, and indigo, with a legend shown above the chart. Built with React and D3.js (d3.scaleLinear, d3.axisBottom, d3.axisLeft), the SVG plot is rendered dynamically and responds to window resizing. Data is loaded asynchronously from a CSV file via d3.csv.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

HW01-Iris

This interactive scatterplot of the classic Iris dataset allows viewers to explore relationships between sepal and petal measurements by selecting any pair of features for the x- and y-axes via radio buttons. The plot displays 150 flowers, color-coded by species, with semi-transparent circles rendered as SVG. The visualization dynamically updates using D3.js scales and axes, and it redraws responsively on window resize. Data is loaded from a CSV file, and species-specific colors are applied through CSS classes.

YYang Shun Yu

95% match

Loading thumbnail…

Iris Scatter Plot_0713316

This interactive scatter plot visualizes the classic Iris dataset, displaying the relationships between four flower measurements (sepal length, sepal width, petal length, petal width). Users can select which measurements appear on the x- and y-axes via dropdown menus, with points colored by iris species (setosa, versicolor, virginica). The visualization uses React for component state management and D3 v5 APIs including `csv` for data loading, `scaleLinear` for axis scaling, and `scaleOrdinal` for categorical coloring. Rendered as SVG with custom axes, the plot updates dynamically when users change attribute selections.

Xx112358

93% match

Loading thumbnail…

HW1_Iris

An interactive scatterplot of Fisher's Iris dataset lets users explore relationships between sepal and petal measurements by switching the X and Y axes via dropdown menus. Species are encoded by color, with a legend that filters the displayed points on hover. The visualization is rendered as an SVG using React and D3 v5, employing D3's `scaleLinear` and `scaleOrdinal` scales for axes and color, along with D3's `extent` for domain calculation.

SSandyWu7179290504

93% match

Loading thumbnail…

HW1_Iris

This interactive scatterplot displays the Iris flower dataset, letting users compare four measurements (sepal and petal length and width) by selecting attributes for the x- and y-axes via ReactDropdown. Points are colored by species using d3.scaleOrdinal, with a legend that highlights one class on hover. The visualization uses React and d3.v5, rendering circles as SVG marks with d3.scaleLinear axes. Hovering over legend items filters the plotted circles’ opacity, while built-in tooltips show exact values.

SSandyWu7179290504

93% match

Loading thumbnail…

HW1 Scatter Plots

This interactive scatter plot visualizes the Iris dataset, showing relationships between sepal and petal measurements across three flower species. Users can dynamically switch which measurements appear on the x and y axes using dropdown menus. The visualization uses D3 scales and axes for data mapping, while React manages the component state and UI controls. Points are rendered as colored circles in SVG, with a legend indicating species assignments. The code follows the React & D3 pattern where React handles the interface and D3’s selection methods update the SVG elements.

YYang Shun Yu

92% match

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…

HW1_test

This interactive scatter plot visualizes the classic Iris dataset, displaying measurements of sepal and petal dimensions for three flower species. Users can explore relationships between any two numerical attributes using dropdown menus to select variables for the x and y axes. The visualization uses React components with D3 v5 scales and SVG rendering, implementing custom AxisBottom and AxisLeft components along with colored circles to distinguish Iris-setosa, Iris-versicolor, and Iris-virginica specimens.

Ping-Yu Yang

92% match

Loading thumbnail…

Iris Scatter Plot_0713316

This interactive scatter plot visualizes the classic Iris dataset, which contains measurements of sepal and petal dimensions for three species of iris flowers. Users can dynamically select which attributes appear on the x- and y-axes via dropdown menus, allowing exploration of relationships between any pair of the four measurement features. The visualization renders as an SVG using D3 v5 for scales and axes, while React manages the state and component structure for the interactive controls. Points are color-coded by species using a d3.scaleOrdinal with distinct colors, and each point includes a tooltip showing its exact value.

Ppotatowedges555

92% match