Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published1🌍 Public

Last edited Jul 2, 2022

Created on Jul 1, 2022

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically change which attributes are displayed on the x and y axes through two dropdown menus. Built with React managing state and D3 v7 utilities like `scaleLinear` and `extent` for scaling, the SVG rendering includes custom axis components and circles with tooltips. The code uses a custom `useData` hook with the `csv` function to load and parse the dataset, coordinating menu selections with axis labels and data values.

AI-generated description

A program that loads in some data using D3 utilities, and uses React state to keep track of the data.

Plotting the Iris dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot With Menus v2

This interactive scatter plot displays the Iris dataset, allowing users to select which attribute to map to the x- and y-axes via two dropdown menus. The visualization is built with React and renders SVG circles using D3 scales and axes, with a tooltip on each point showing its value. Data is loaded via D3’s `csv` function, and the selections update the state to re-render the plot with the chosen attributes.

AAndres de la Garza

96% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two numeric attributes by selecting them from dropdown menus for the x- and y-axes. The chart renders data points as SVG circles using React components and D3 scales (scaleLinear, extent) for positioning. Axis components generate ticks and labels, while menu options dynamically update the displayed dimensions. The visualization uses React state to manage selected attributes and d3.csv to load the data, with axis formatting applied via d3.format.

KKevin McMorrow

96% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which numeric attributes appear on the x- and y-axes via dropdown menus. Built with React and D3 v5, it renders SVG circles for each data point, with axes generated through custom React components. The code uses `d3.scaleLinear` for scaling, `d3.extent` for domains, and `d3.csv` for loading data, while `ReactDropdown` provides the menu controls.

Ttharuta

96% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, featuring dropdown menus that let viewers select which numerical attributes to display on the x and y axes. The visualization renders data points as SVG circles using React components, with axes generated from D3 scales (scaleLinear) and tick formatting via the format function. Users can compare any combination of sepal and petal measurements, with axis labels updating dynamically to reflect the current selection. The chart loads CSV data asynchronously using D3’s csv parser, and menu interactions update state through React’s useState hook.

Vvesnaj

96% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, showing relationships between numeric attributes while allowing users to change the X and Y variables through dropdown menus. The visualization uses React for state management and rendering, with D3.js v5 scales and SVG marks. Axis components generate ticks via scale methods, while circle elements with embedded titles serve as tooltips. The plot retrieves CSV data using d3.csv and scales the axes with scaleLinear.

MMichael Bergerson

96% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which numeric attributes to plot on the X and Y axes via two dropdown menus. React state manages the selected attributes and triggers re-rendering of the SVG chart, while D3 (d3.scaleLinear, d3.extent) handles scaling and data loading from the CSV file. The chart includes labeled axes with tick marks and circles with tooltips for each data point.

CChristian Potdevin

96% match

Loading thumbnail…

Scatter Plot with Menus

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.

CCurran Kelleher

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

96% match