Fork of Scatter Plot with Menus

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to select which quantitative attributes appear on the x- and y-axes through two dropdown menus built with React state. The visualization is rendered as an SVG, with axes and circles generated by D3 v5 scales and React components. Data is loaded asynchronously from a CSV file using d3.csv, and the plot updates dynamically when dropdown selections change.

EEdgar Alves

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which attributes to display on each axis via dropdown menus built with React state. The visualization uses D3 v5’s `scaleLinear`, `extent`, and `format` functions to map data values to SVG circle positions rendered through React components, with transitions applied when axes change. The chart includes labeled axes and tooltips showing the x-value for each point.

CChintan Sawla

Fork of Scatter Plot with Menus

This is an interactive scatter plot of the classic Iris Dataset, featuring dropdown menus to select which quantitative attribute is mapped to the x and y axes. The visualization displays all 150 flowers, with each point’s species identifiable through the available attributes. Built with React and d3, the code uses React’s `useState` hooks to manage selected axes, d3’s `scaleLinear`, `extent`, and `csv` for data loading and scaling, and custom React components for the axes and marks. SVG circles render the data points, with axis labels updating dynamically based on menu selections.

Hhung2606

Fork of Scatter Plot with Menus

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between four measured attributes and species through dropdown menus that dynamically reassign the x- and y-axes. Built with React and rendered as SVG using D3 v5, the visualization updates scales and marks via state changes triggered by the dropdown selections. The code leverages `scaleLinear`, `extent`, and `csv` for data loading and scaling, with custom React components for axes, marks, and menu controls.

XXiaoyu Su

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements. Two dropdown menus let viewers independently select which attribute appears on the x- and y-axes, updating the plot instantly. The visualization uses React for the interactive controls and D3.js’s `scaleLinear` and `extent` for axes and data scaling. Data is fetched as CSV from a GitHub gist, and circle marks with tooltips display each sample, rendered as SVG.

Mmartin_tp@live.dk

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric attributes through dropdown menus that dynamically reassign the x and y axes. The visualization uses React for component management and state, d3.v5 for scales and CSV parsing, and renders SVG circles with tooltips showing formatted values. Users can switch between sepal and petal measurements, with axis labels updating accordingly to reflect the selected variables.

EEugenio2192

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing the selection of any of its four numerical attributes for the x and y axes through dropdown menus. Built with React and D3, the visualization uses `scaleLinear` to map data to SVG coordinates, rendering circles with tooltips that display formatted values. Axis labels and tick marks are controlled by custom components, providing a flexible exploration of relationships between sepal and petal measurements.

AAnthony Le

Fork of Scatter Plot with Menus

A scatter plot of the Iris dataset allows users to select which flower attributes appear on the X and Y axes via two dropdown menus. Built with React and D3 v5, it uses `scaleLinear` and `extent` to map data to SVG coordinates. Axis components render ticks and labels, while circular marks display each sample with tooltips. The dataset is loaded as CSV and all four numeric measurements plus species are available as axis options.

Ttrissentety