Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Aug 18, 2024

Created on Aug 18, 2024

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

97% match

Loading thumbnail…

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

96% match

Loading thumbnail…

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

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing viewers to explore relationships between sepal and petal measurements by swapping attributes on the x- and y-axes via dropdown menus. Built with React and D3 v5, it uses `scaleLinear` for axes, `csv` for data loading, and SVG circles rendered through React components for marks. At any moment, the graph displays one combination of the four numeric attributes, with axis labels updating dynamically to reflect the selected measures.

Mmartinbirch@outlook.dk

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris Dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus, implemented with React state, dynamically select which numerical attributes map to the x and y axes. The visualization renders as an SVG using React with D3’s `scaleLinear` for axis scales and `extent` to compute domains from the CSV data. Circle marks use a tooltip via the `<title>` element.

Eevers-codeshop-ai

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements (sepal length, sepal width, petal length, petal width, or species) appear on each axis via dropdown menus. Built with React and D3 v5, it uses `scaleLinear` from d3 for axis scaling, `extent` for domain computation, and `csv` for data loading. SVG circles represent individual iris samples, with D3 tick marks and labels rendered as React components, and each point includes a tooltip showing its x-axis value.

Lleonine2017

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot explores the Iris dataset, allowing users to select any of four measurements—sepal length/width and petal length/width—for both the X and Y axes via dropdown menus, with axis labels updating accordingly. Built with React and D3 v5, the visualization uses `scaleLinear` and `extent` to compute scales, then renders circles via SVG marks with tooltips. The code relies on the `useData` hook to asynchronously load the CSV from Curran’s Gist, and custom `AxisBottom`/`AxisLeft` components generate ticks.

AAnnie Ulichney

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot explores the Iris Dataset, displaying sepal and petal measurements across four attributes. Users select which variables to plot on the X and Y axes through two dropdown menus, allowing arbitrary pairings of the dataset’s quantitative features. The visualization uses React with `useState` for menu state and D3’s `scaleLinear` for axes, rendered as SVG circles with tooltips showing axis values. The example demonstrates a classic approach to interactive multivariate exploration within a fixed canvas.

JJusung

96% match