HW1_Iris

100%

✓ Published1🌍 Public

Last edited Oct 1, 2022

Created on Oct 1, 2022

Forked from Polished Scatter Plot with Menus

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.

AI-generated description

MIT Licensed

Similar vizzes

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

94% match

Loading thumbnail…

Fork of HW1_Iris

This example shows an interactive scatter plot of the classic Iris dataset, letting users select which of four sepal and petal measurements appear on each axis. A color legend identifies the three flower species, and hovering over a species dims all non-matching points. Built with React, the visualization uses D3 v5 scales like `scaleLinear`, `scaleOrdinal`, and `extent` to map data to positions and colors, rendering SVG circles and axes, with ReactDropdown for menu controls.

SSandyWu7179290504

93% match

Loading thumbnail…

HW01-Iris

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.

YYang Shun Yu

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…

DATA VISUALIZATION HW1 v5

This interactive scatter plot explores the classic Iris dataset, allowing users to compare any two measurements (sepal length, sepal width, petal length, petal width) via React dropdowns. Each of the 150 flowers is rendered as an SVG circle, colored by species using a d3.scaleOrdinal scale. Hovering over a color legend entry dims non-matching points (set to 20% opacity) while highlighting that species’ members. Axes are built with d3.scaleLinear and custom React components, with data loaded asynchronously via d3.csv. Tooltips show the x-value on hover.

Nnathanowen06

92% match

Loading thumbnail…

HW1 Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between four numeric attributes by selecting which ones appear on the x- and y-axes via React dropdown menus. Each point represents a flower, colored by species according to a d3.scaleOrdinal mapping. The visualization uses React components to render SVG elements, with d3.scaleLinear for axes and d3.extent for domains. The code loads data from a CSV file using d3.csv and renders custom axis components with tick marks.

EEast007

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

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