Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published66🌍 Public

Last edited Dec 12, 2020

Created on Sep 26, 2019

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements. Two dropdown menus independently select the attributes plotted on the x and y axes, with axes and labels updating accordingly. Built with React and D3 v5, it uses `scaleLinear`, `extent`, and `csv` for data loading and scaling. Points are rendered as SVG circles, with tooltips showing formatted values. The interface demonstrates a simple pattern for linking dropdown controls to dynamic axis updates.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, allowing users to compare any two attributes by selecting them from dropdown menus for the X and Y axes. The visualization updates dynamically, with axis labels and scales recalculating to reflect the chosen measurements. Built with React and D3 v5, it uses `scaleLinear` and `extent` to derive scales, renders SVG circles for each data point, and organizes its code into reusable components for axes, marks, and dropdowns. The data is loaded from a CSV file via D3’s `csv` function.

JJohn Patrick Banas

97% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between measurements by selecting which attributes appear on the x- and y-axes via dropdown menus. The visualization uses React with D3 v5 to render SVG circles, with scales and axes built through d3.scaleLinear and d3.axis components. Data is loaded asynchronously from a CSV file using d3.csv, and axis labels update dynamically based on menu selections.

Ccynichole

97% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements via dropdown menus. The chart displays data points as circles, with the x-axis and y-axis representing selected attributes like petal length or sepal width. Built with React and D3 utilities, the visualization uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.csv for data loading. Users switch attributes through React state management, triggering real-time updates to the axes and marks rendered as SVG circles with tooltips.

LLaura Johnson

97% 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

97% match

Loading thumbnail…

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

97% 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

97% match

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

97% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric attributes and species through two dropdown menus. Built with React and D3 v5, the visualization renders SVG circles colored teal, with axes that dynamically update based on selected measurements. The `csv` loader fetches data from a remote URL, while `scaleLinear`, `extent`, and `format` handle scaling and tick labeling. The component-based architecture separates axis rendering, dropdown controls, and mark generation for modular interaction.

Ppnlinyz

97% match