Scatter Plot with menues

100%

Scatter Plot with menues

✓ Published1🌍 Public

Last edited Oct 6, 2023

Created on Sep 30, 2023

A scatter plot of the Iris dataset lets users choose which measurements to plot on the X and Y axes via two React dropdown menus. A color legend for species doubles as a filter, fading points not belonging to the hovered category. The visualization uses D3 scales (scaleLinear, scaleOrdinal) and SVG rendering in React, with axes and points built from reusable components.

AI-generated description

A scatter plott

MIT Licensed

Similar vizzes

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 dropdown menus. The plot uses React dropdowns to control the axes, with d3.scaleLinear for positioning and d3.scaleOrdinal for species-based coloring. Hovering over the color legend highlights points of a selected species, using React’s useState to manage the hovered value, while SVG circles render each data point with tooltips.

CCatalina Vajiac

95% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset depicts relationships between flower measurements, with dropdown menus to select which attributes appear on the x and y axes. The visualization uses a React front end with the D3 v7 library for scales, axes, and rendering as SVG circles via the `scaleLinear`, `AxisBottom`, and `AxisLeft` components. Data is loaded as CSV and parsed with `d3.csv`, while hover tooltips display formatted values through SVG `<title>` elements.

OOleg Zhernovoy

95% match

Loading thumbnail…

Scatter Plot with Menus and Colour

This scatter plot of the Iris dataset uses interactive dropdown menus to explore relationships between measurements. Users can select different attributes for the X and Y axes, and the visualization color-codes each point by species using a D3 ordinal scale. Built with React and rendered as SVG, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and custom React components for the dropdowns and marks. The plot includes axis labels and tick formatting via `format('.2s')`, with tooltips showing the x-value on hover.

NNikita Toropov

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

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

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

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

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