Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published1🌍 Public

Last edited Nov 17, 2021

Created on Nov 17, 2021

This interactive scatter plot, built with React and D3, visualizes Fisher's Iris dataset. Users can independently select which of four flower measurements to plot on the X and Y axes through dropdown menus. The visualization updates the scatter plot and its axis labels dynamically upon selection. D3's `scaleLinear` and `extent` functions handle the scaling, while React manages the application state. The plot uses SVG circles for each data point and includes native tooltips for precise value inspection.

AI-generated description

A Scatter Plot based on Iris Data

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

Interactive scatter plots of the Iris dataset allow users to select any of four numeric flower measurements for the x and y axes via dropdown menus built with React. The visualization uses D3 scales and SVG axes to render circles colored by default, with axis labels updating dynamically to reflect the selected attributes. Data is loaded asynchronously from a CSV using `d3.csv`, and React hooks manage the chart's state and re-rendering.

TTaweewat Somboonpanyakul

95% match

Loading thumbnail…

Scatter Plot with Menus

An interactive scatter plot of the Iris dataset displays four flower measurements as points, with dropdown menus to select which attribute appears on each axis. React state updates the selected variables, and d3.scaleLinear computes the scales from the data extents. The SVG chart renders axes via custom React components and circles for each observation, with tooltips showing values formatted using d3.format.

Yyyaaa1

95% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset, rendered with SVG in React, lets users select which of four flower measurements to plot on the x- and y-axes via two dropdown menus. The visualization reads data with d3.csv, scales the axes with d3.scaleLinear, and formats tick labels using d3.format. Each circle’s tooltip shows its x-value via an SVG `<title>` element. The chart updates dynamically when a menu selection changes.

Jjwlam83

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

94% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements appear on the x- and y-axes via two dropdown menus. The React application uses D3 v5 for data loading, scaling, and axis generation, while rendering SVG circles for each data point. The plot includes tooltips showing the x-axis value for each point, with axis labels updating dynamically based on the selected attributes.

Tthomasjungcoe

94% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, letting users choose which flower measurements to compare on the X and Y axes. Two dropdown menus, built with React state, control the selected attributes; the chart updates the scales, axes, and labels accordingly. The visualization uses D3 v5 scales and SVG rendering through React components, with tooltips on each circle showing the formatted X value. Data is loaded asynchronously via d3.csv from a remote gist.

Ssophburke

94% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, plotted with D3 scales and rendered as SVG circles via React components. Two dropdown menus, built with React state, let users select which of the four flower measurements (sepal length/width, petal length/width) to map to the x- and y-axes, with axis labels updating accordingly. The visualization uses `d3.csv` for data loading, `d3.scaleLinear` for axes, and custom React components for axes and marks, with native SVG `<title>` elements for hover tooltips.

LLisa Wagner

94% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements appear on the x- and y-axes via two dropdown menus. The visualization uses React hooks (useState, useEffect) to manage state and data loading, while D3 v5 (scaleLinear, extent, max, csv) handles scales, axes, and CSV parsing. Rendered as an SVG, each data point appears as a circle with a tooltip showing its value. The menus update the axes and labels dynamically, using d3.format for tick labels and React components for modular rendering.

Jjanneprice

94% match