Work on Data

Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric flower measurements by selecting which attribute appears on each axis via dropdown menus. Built with React and D3 v5, the visualization renders SVG circles positioned using linear scales, with labeled axes and tick marks generated by custom React components. The data loads asynchronously from a GitHub gist using D3's `csv` parsing function, and the interactive dropdowns update the chart's state to reflect new attribute selections.

XXiaoyu Su

data into components

This interactive scatterplot explorer visualizes the Iris flower dataset, allowing users to select which quantitative attributes to plot on the X and Y axes via dropdown menus. The visualization dynamically determines the appropriate statistical test (e.g., t-test, ANOVA, chi-squared) based on the data types of the selected variables, displaying the test type as a header. Built with React and D3 v7, the SVG rendering uses `scaleLinear` and `extent` for axis scaling, while data classification and parsing are handled through custom logic in `useData.js` using `csv` loading.

Aafcchilders

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, displaying measurements for three flower species. Two dropdown menus let users independently select which attributes to plot on the X and Y axes. Built with React and D3, the visualization uses `scaleLinear` for axes and SVG circles for data points. Hovering reveals tooltips with formatted values. The React app manages state for axis selections and loads CSV data via D3's `csv` function, rendering axes and marks as React components with D3 scales.

RRay Yang

new

This interactive scatter plot explores the Iris dataset, allowing users to select which four numeric flower measurements appear on the x- and y-axes via React dropdown menus. The SVG visualization uses d3.scaleLinear for both axes, with d3.axisBottom and d3.axisLeft rendering labeled ticks and gridlines. Each flower is plotted as a circle, and hovering reveals a native tooltip showing the x-value. The data is loaded as CSV using d3.csv and parsed with unary plus operators.

Ggayatrisridhar

Iris Data With React and D3

A scatter plot of the Iris dataset, rendered as SVG circles, displays relationships between selected measurements such as petal length and sepal width. Dropdown menus let users choose which numeric attribute appears on each axis. The React app uses `useState` and `useEffect` to manage selection and load CSV data via D3’s `csv` function. Scales created with `scaleLinear` and `extent` map data to coordinates, while custom React components render axes and marks.

CChinedu Ozodi

Iris Scatter Plot

This interactive scatter plot explores the Iris dataset, allowing users to select any combination of sepal and petal measurements for the x and y axes via dropdown menus. The visualization renders circles for each flower specimen using React and D3.js, with axes generated by `scaleLinear`, `extent`, and custom React components. Data is loaded asynchronously from a CSV file using D3's `csv` function. Hovering over a point reveals its exact attribute value through an SVG `<title>` tooltip.

AAustin0524

Scatter Plot with Color

This interactive scatter plot displays the Iris dataset, with dropdown menus enabling users to select which flower measurements appear on the x- and y-axes. Each point is colored by species using a D3 ordinal scale, and hovering reveals the sepal length via SVG circle titles. Built with React hooks for state management, the visualization uses D3 scales and the `csv` loader to parse data, while custom React components render the axes and marks.

MMario Ibarra

Dataviz 9 - Scatter plot with Menus

This interactive scatter plot explores the Iris Dataset, allowing users to dynamically select which flower measurements appear on the x- and y-axes via dropdown menus. Each point represents a flower specimen, positioned according to its sepal and petal dimensions. The visualization uses React for state management and rendering, while D3.js v5 handles data loading, linear scaling (scaleLinear), and SVG axis generation. The data is parsed from a CSV file using D3’s csv function, and axis labels update dynamically to reflect the selected attributes.

RRyAlpha