data vis hw1

Flower Data Scatterplot

This scatterplot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus that control the x- and y-axes. Points are colored by species, and hovering over the color legend highlights only that species while dimming the rest. Built with React and D3 v5, the visualization uses SVG rendering, d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and d3.csv for data loading.

Jjulesgentry

94% match

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.

93% match

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.

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.

hw4

This interactive scatter plot displays the Iris flower dataset, showing how sepal and petal measurements vary across three species. Users select which measurement appears on each axis from dropdown menus, while a color legend identifies species. The visualization uses React with D3 v5 utilities, including `scaleLinear`, `scaleOrdinal`, and `extent` to map data to SVG circles. Coordinates derive from the selected CSV-loaded measurements, with axes rendered by custom React components using D3 scales.

JJiaYu07

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

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.