Viz HW1

100%

✓ Published0🌍 Public

Last edited Sep 30, 2022

Created on Sep 30, 2022

Forked from Fork of Scatter Plot with Menus

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Viz HW1

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.

Ppete0707

94% match

Loading thumbnail…

DATA VISUALIZATION HW1 v3

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attributes appear on the x- and y-axes, while color distinguishes the three Iris species. A color legend with hover interactions highlights individual species by fading non-selected points. The visualization is built with React, using D3 v5 scales (scaleLinear, scaleOrdinal) for positioning and coloring, and renders as SVG with custom axis and legend components.

Nnathanowen06

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

91% match

Loading thumbnail…

Data Visualization and Visual Analytics HW1

This interactive scatterplot visualizes the Iris flower dataset, letting users explore relationships between sepal and petal measurements. Two dropdown menus dynamically select which attribute appears on the X and Y axes, while points are color-coded by species. The visualization uses React for state management and dropdown controls, with D3 v5 scales and SVG rendering for the axes, ticks, and colored circles. The data loads from a CSV via d3.csv, and axis labels update based on the selected attributes.

YYU

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

91% match

Loading thumbnail…

HW1 : Polished Scatter Plot with Menus and Colors and Color Legend

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements by selecting different attributes from two dropdown menus. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal to map species to colors, and displays a color legend for the three Iris species. Built with React and D3 v7, it renders SVG circles with hover tooltips showing x-values, while React state (useState) handles the user’s menu selections to update the chart dynamically.

Sstephanie0215

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

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