Temp Spiral

Scatter Plot with Color

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that select which attributes appear on each axis. The visualization uses React with d3.v5 scales, including scaleLinear for positioning and scaleOrdinal to encode species identity with distinct colors. SVG circles render the data points with tooltips showing exact values, while custom AxisBottom and AxisLeft components generate the tick marks and labels. The code employs d3.csv for data loading and d3.format for axis tick formatting.

MMrMartin85

Untitled

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attribute appears on the x- and y-axes, updating the plot and axis labels accordingly. Data points are colored by species using a categorical scale. The visualization is built with React and D3 v5, using `d3.csv` to load data, `d3.scaleLinear` for axes, and SVG circles for marks. Axes and tick marks are drawn with custom React components.

HHsu0208

Iris Scatter Plots_HW

This interactive scatter plot visualizes Fisher’s Iris dataset, letting users compare any two measured attributes (sepal/petal length and width) via dropdown menus. Points are colored by species using a ordinal scale, with axes and gridlines rendered through d3.axisBottom and d3.axisLeft. The React-driven interface updates scales, circles, and axis labels dynamically, while the SVG rendering uses d3.scaleLinear with nice extents. The code loads data via d3.csv and applies CSS opacity for overlapping points.

Sstephanie0215

Scatter Plot with

This interactive scatter plot visualizes the Iris dataset, allowing exploration of relationships between sepal and petal measurements. Users select variables for the X and Y axes from dropdown menus, which dynamically update the scales and axis labels. The visualization uses D3 v5 for scaling, axis rendering, and data mapping, with React managing state and composing SVG elements. Each data point is rendered as an SVG circle with a tooltip showing its value. The code leverages `d3.scaleLinear`, `d3.extent`, and `d3.format` for axis tick formatting, while `AxisBottom` and `AxisLeft` components generate the axes.

FFAN CHI YU(范紀予)

Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across flower species. Two dropdown menus let viewers select which attributes map to the x and y axes, with the chart updating dynamically via React state management. The visualization uses d3.scaleLinear for axis scaling, d3.extent to compute domains, and d3.csv for data loading. React components render SVG circles as marks, with axes generated by custom AxisBottom and AxisLeft components that leverage d3's tick generation.

Rrstrauss127

Iris Scatter Plot v2

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis. The React-based interface uses dropdown menus to swap the x and y variables, while d3.scaleLinear and d3.extent handle the scales and domains. Data is loaded from a CSV file using d3.csv, and the SVG rendering uses custom React components for axes and circular marks.

JJohn Lewis

Iris Scatter Plot v3

This interactive scatter plot visualizes the Iris dataset, plotting sepal and petal measurements against each other. Users can select different attributes for the x and y axes via dropdown menus, with each circular mark representing an individual flower. The visualization uses React components with D3 v7 scales (scaleLinear) and the extent function to compute domains, rendering SVG circles with hover tooltips. Data loads asynchronously from a CSV file using the d3.csv method.

JJohn Lewis

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Fisher Iris dataset, allowing users to explore relationships between sepal and petal measurements by changing the X and Y axes through dropdown menus. The SVG rendering uses React components to structure the visualization, with D3.js v5 handling scales, axes, and data mapping. Each data point is drawn as a circle with a tooltip showing its value, while axis labels and tick marks are styled with a clean, polished theme. The data is loaded asynchronously from a CSV file using D3’s `csv` function.

Aaakarsh satyam