React scatterplot chart + menus

Scatter Plot with menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements appear on the x- and y-axes via React dropdown menus. The SVG chart renders circles for each sample, with axes and labels generated using D3 scales and tick formatting. React state management refreshes the visualization when menu selections change, while D3’s `csv` loader parses the data and `scaleLinear` maps values to coordinates.

SShanmukh

Scatter plot with menus

This scatter plot of the Iris dataset displays the relationships between flower measurements, with interactive dropdown menus to select the attributes for the x and y axes. The chart shows all data points colored by species, and hovering over the color legend highlights a single species while fading the others. Built with React and D3, the visualization uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.extent` for scales and domains, while custom React components render SVG axes, circles, and the legend.

TTakuya Kitazawa

Scatter plot with menus and colors

This interactive scatter plot explores the Iris dataset, displaying species as colored points with selectable X and Y axes. Two dropdown menus, built with react-dropdown, let users choose which flower measurements to compare, while a color legend identifies the three species using d3.scaleOrdinal. The visualization uses React state management and SVG rendering through D3 scales and axes (scaleLinear, AxisBottom, AxisLeft) to redraw the chart whenever the selected attributes change.

MmohitPassan

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements appear on the x and y axes via dropdown menus. The plot uses React dropdowns to control the axes, with d3.scaleLinear for positioning and d3.scaleOrdinal for species-based coloring. Hovering over the color legend highlights points of a selected species, using React’s useState to manage the hovered value, while SVG circles render each data point with tooltips.

CCatalina Vajiac

AAdriana Rodriguez Sanabria

Scatter Plot with Menu and Colors

An interactive scatter plot of the Iris dataset allows users to explore relationships between flower measurements by selecting which attributes appear on the X and Y axes via React dropdown menus. The visualization uses D3’s `scaleLinear` for axes and `scaleOrdinal` for categorical species colors, with React rendering SVG circles for each data point. Tooltips show formatted axis values on hover, and axis labels update based on the selected attributes. Data is loaded asynchronously with D3’s `csv` and parsed into numeric values.

scatter plot with menus

An interactive scatter plot of the Iris dataset allows users to select which flower measurements appear on the x- and y-axes via dropdown menus. Built with React and D3 v5, it renders points as SVG circles, with axes labeled according to the chosen attributes. D3’s `scaleLinear`, `extent`, and `csv` functions handle data loading and scaling, while React’s `useState` manages the selected dimensions. The plot’s axes are generated through custom React components, and hovering reveals exact values via SVG `<title>` tooltips.

DDanier

polished scatter menus

This interactive scatter plot of the Iris dataset lets users dynamically select which flower measurements appear on the x and y axes using React Dropdown menus. The visualization updates the axes and points accordingly, with circles colored by species via a d3.scaleOrdinal scale. Built with React and D3 v5, it renders an SVG chart featuring d3.scaleLinear axes, axis tick components, and tooltips displaying formatted values, loading data from a CSV file.

Mmarianamartins87

Scatter Plot with Menus and Color Legend

Interactive scatter plot of the Iris dataset, implemented with React and D3 v5, visualizes relationships between flower measurements. Users can dynamically select which quantitative attributes to plot on the x and y axes using dropdown menus, while a color legend distinguishes species. The visualization uses D3's scaleLinear, scaleOrdinal, and extent APIs to compute scales, with SVG marks rendered as circles. Data is loaded from a CSV file using D3's csv function. The interface includes custom React components for axes and a color legend, with styling from Poppins fonts and the react-dropdown library.

TTatyana Milanova