scatterplot with menus

100%

scatterplot with menus

✓ Published0🌍 Public

Last edited Mar 21, 2021

Created on Mar 21, 2021

This interactive scatterplot displays the Iris flower dataset, allowing viewers to explore relationships between four measured attributes by swapping either axis via dropdown menus. The visualization uses React to manage state and render SVG elements, while D3 v5 handles data loading, scales, and axis generation. Colors and sizes remain constant for all points, with hover tooltips showing formatted x-axis values. The two menus independently control which attribute appears on each axis, enabling immediate comparison across all attribute pairs.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, allowing exploration of relationships between four flower measurements. Two dropdown menus let users select which attribute is mapped to the x-axis and y-axis, dynamically updating the plotted circles and axis labels. The visualization is built with React and rendered as SVG, using D3 v5 utilities like `scaleLinear` for axes and `csv()` for data loading. Hovering over a point reveals its x-value via an SVG `<title>` tooltip.

AAndrea Picciau

96% match

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes the Iris Dataset, allowing users to explore relationships between four numeric flower measurements and species through interactive dropdown menus that control which attributes appear on the x and y axes. The visualization uses React to manage state for selected attributes, while D3.js handles the linear scales, axis generation, and data loading via `csv`. The SVG rendering displays circles colored teal, with axis labels updating dynamically based on menu selections.

Wwindwaver

95% match

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays the classic Iris flower dataset, letting users compare any two measured attributes at once. Two dropdown menus independently select the variables assigned to the x and y axes, instantly repositioning all data points. The visualization is built with React and renders SVG elements using D3 scales, axes, and tick formatting. Circles represent individual flowers, with native SVG titles providing hover tooltips showing the x-axis value. Data loading relies on D3's `csv` function, while linear scales and extent computations handle the numerical ranges for each chosen attribute combination.

Rrsulli4

95% match

Loading thumbnail…

scatter plot with menus

A scatter plot of the Iris dataset, rendered as SVG, lets users explore relationships between floral measurements by selecting attributes for the X and Y axes from dropdown menus. Built with React and D3 v5, the visualization updates the axes and circles when new attributes are chosen, using d3.scaleLinear for data mapping and d3.extent to set domains.

Ggayatrisridhar

95% match

Loading thumbnail…

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

95% match

Loading thumbnail…

Scatterplot with menus

A scatterplot of the Iris dataset allows users to explore relationships between flower measurements by selecting which attributes appear on the X and Y axes via dropdown menus. The visualization uses React for component-based UI, with D3 v5’s `scaleLinear`, `extent`, and `csv` for data loading and scaling, rendering SVG axes and circle marks. Each point includes a tooltip showing the formatted X-axis value. The Iris data is fetched from a remote CSV file, and axis labels update dynamically based on the selected attributes.

LLove Wessman

94% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the classic Iris dataset, allowing users to compare any two numerical attributes by selecting them from dropdown menus for the X and Y axes. Each point represents a flower sample, with hover tooltips revealing precise values. Built with React and D3 v5, the visualization uses SVG rendering and scales created via `d3.scaleLinear` and `d3.extent`, with axes generated by custom React components. The menus update the state to re-render the chart dynamically.

MMario Ibarra

94% match

Loading thumbnail…

Scatter Plot With Menus

This scatter plot displays the Iris dataset, allowing users to explore correlations between four numeric flower measurements. Two dropdown menus, built with React, control which attributes appear on the x and y axes, dynamically updating the scales and axis labels. The visualization uses D3 v6 to load the CSV data, calculate linear scales, render SVG axes, and draw circles for each data point. A tooltip appears on hover, showing the formatted x-axis value.

MMonish Vassantrai

94% match