DATA VISUALIZATION HW1 v5

100%

DATA VISUALIZATION HW1 v5

✓ Published0🌍 Public

Last edited Sep 24, 2023

Created on Sep 24, 2023

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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

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

95% match

Loading thumbnail…

DATA VISUALIZATION HW1

This interactive scatter plot visualizes the Iris dataset, with dropdown menus to select which sepal or petal measurement appears on the X and Y axes. D3 scales map the selected attributes to positions, while an ordinal color scale distinguishes the three iris species, with a color legend. The visualization uses React for state management and SVG rendering, with the `useData` hook loading the CSV. Alternative axes reveal different clustering patterns across the four measurement dimensions.

Nnathanowen06

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

93% match

Loading thumbnail…

data vis hw1

This scatterplot displays the Iris flower dataset, plotting sepal and petal measurements as colored circles. Users select the x and y attributes from dropdown menus, and hovering over the legend highlights the corresponding flower species while fading others. It uses React with d3.scaleLinear, d3.scaleOrdinal, SVG axes, and custom React components for marks and legends. Data is loaded via d3.csv from a GitHub gist.

Yyeeet0421

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

92% 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 - Scatter Plots of Iris Dataset

This interactive scatter plot explores the classic Iris dataset, visualizing measurements of sepal and petal dimensions. The visualization displays individual data points colored by species, with dropdown menus allowing users to dynamically change which four attributes are plotted on the x and y axes. Hovering over any point enlarges it and displays its exact coordinate values in a tooltip. The implementation uses D3 v5 for rendering SVG axes, circles, and animations, while React handles the dropdown menu interactions. The chart updates smoothly, re-scaling axes and repositioning points whenever the selected attributes change.

JJuliachien

91% match