Viz HW1

100%

✓ Published0🌍 Public

Last edited Nov 14, 2022

Created on Nov 14, 2022

This interactive scatterplot lets users explore the classic Iris flower dataset by switching between four numeric measurements for the x- and y-axes via dropdown menus. The visualization uses React to manage state and render SVG circles, with D3 v5 providing scales, axes, and CSV data loading. Points are color-coded by iris species, and a legend identifies the three classes. The interface includes axis labels and tick marks generated with D3’s scale API, while React’s `useState` and `useEffect` handle data fetching and attribute selection.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Viz HW1

This interactive scatter plot explores the Iris flower dataset, featuring a menu to switch the x-axis among attributes. Built with React and D3.js v5, it maps sepal and petal measurements using d3.scaleLinear, with color encoding by species via d3.scaleOrdinal. The visualization uses SVG circles for marks and custom React components for axes, dropdowns, and a color legend.

Aa1153724

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

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

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

90% match

Loading thumbnail…

DATA VISUALIZATION HW1 v2

This interactive scatter plot of the classic Iris dataset lets users explore relationships between sepal and petal measurements. Built with React and D3.js (v5), it renders 150 points as SVGs, colored by iris species. Users can select any measurement combination for the X and Y axes via dropdown menus. Hovering over a species in the color legend highlights that group's points while dimming others, using D3's scaleOrdinal for color mapping and scaleLinear for axes.

Nnathanowen06

89% match

Loading thumbnail…

HW1_Scatter Plot

This interactive scatter plot explores the classic Iris dataset, displaying measurements such as petal length and sepal width as colored circles representing species. Users can switch the X and Y axes via dropdown menus to compare any pair of attributes, while hovering over the color legend highlights points from a selected species and fades the rest. The visualization is built with React and D3 v5, rendering SVG marks and axes using components like `AxisBottom`, `AxisLeft`, and `Marks`, with scales from `d3.scaleLinear` and `d3.scaleOrdinal`. Data is loaded asynchronously via D3’s `csv` function.

JJames Huang

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

89% match

Loading thumbnail…

HW1 Scatter Plots for Iris

This interactive scatter plot explores the Iris dataset, letting users compare any two of the four flower measurements via dropdown menus. The chart renders 150 species-classified points with a D3 transition that animates them from the center to their positions on the axes, which update smoothly with each selection. Using D3 v7 scales and axes, it draws an SVG with colored circles for each Iris class and includes a legend for identification. The visualization demonstrates the distribution and clustering of the three species across different feature combinations.

TTrista Lee

89% match