Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus with color scale and legend

✓ Published1🌍 Public
Rrajamrit-singh
Last edited Mar 22, 2023
Created on Mar 22, 2023

This interactive scatter plot visualizes the Iris Dataset, allowing users to dynamically select which flower measurements appear on the x and y axes via two dropdown menus. Each point is colored by species, with an accompanying color legend. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and React state to update the chart based on menu selections. Data is loaded asynchronously with `csv` from a GitHub URL and rendered as SVG circles.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus with color scale

This interactive scatter plot displays the Iris dataset, with dropdown menus allowing users to select which flower measurements appear on the X and Y axes. Points are colored by species using a D3 ordinal color scale. Built with React and D3 v5, the visualization renders SVG circles and creates linear scales for each axis, with axis ticks generated by explicit React components for bottom and left axes.

Rrajamrit-singh
97% match
Loading thumbnail…

Scatter Plot with Menus and Legend

This interactive scatter plot lets users explore the Iris dataset by selecting which flower measurements to plot on the x and y axes via dropdown menus. The visualization renders 150 data points as colored circles, with each species distinguished by a categorical color scale and accompanying legend. Built with React and D3 v5, the chart uses `scaleLinear`, `scaleOrdinal`, and CSV-loaded data, while axis components are rendered as SVG elements generated through the `AxisBottom` and `AxisLeft` functions.

Ppnlinyz
96% 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 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 and Colors

This interactive scatter plot visualizes the Iris dataset, with dropdown menus to select which flower measurements appear on the X and Y axes. Data points are colored by species, and hovering reveals a tooltip with the X-axis value. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for color mapping, and custom React components for the axes and marks.

CChinedu Ozodi
95% match
Loading thumbnail…

Scatter Plot with Menus and Color Legend

Interactive scatter plot of the Iris dataset, implemented with React and D3 v5, visualizes relationships between flower measurements. Users can dynamically select which quantitative attributes to plot on the x and y axes using dropdown menus, while a color legend distinguishes species. The visualization uses D3's scaleLinear, scaleOrdinal, and extent APIs to compute scales, with SVG marks rendered as circles. Data is loaded from a CSV file using D3's csv function. The interface includes custom React components for axes and a color legend, with styling from Poppins fonts and the react-dropdown library.

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