React Scatter Plot w/ Menus, Color & Color Legend

100%

React Scatter Plot w/ Menus, Color & Color Legend

✓ Published1🌍 Public

Last edited Oct 26, 2023

Created on Oct 16, 2023

This interactive scatter plot explores the classic Iris dataset, using dropdown menus to change which flower measurements map to the X and Y axes. Points are colored by species via a categorical color scale with an accompanying legend. The visualization is built with React and D3 v5, using React hooks for state management and D3 scales like `scaleLinear` and `scaleOrdinal` for positioning and color. It renders as SVG with custom axis and mark components, pulling data from a CSV file.

AI-generated description

A program that shows the iris data set as a scatter plot with menus, color and color legend.

Data: Iris Data.

MIT Licensed

Similar vizzes

Loading thumbnail…

React Scatter Plot w/ Menus, Color & Interactive Color Legend

This interactive React scatter plot visualizes the Iris dataset, letting users select which sepal or petal measurements appear on the X and Y axes via dropdown menus. Each mark is colored by species, and hovering over the color legend highlights matching points while dimming others. Built with d3.v5 scales (scaleLinear, scaleOrdinal) and SVG rendering, it uses React hooks for state management and ReactDropdown for the menus. Data loads asynchronously via d3.csv into a custom useData hook.

Hhunsingeruk@gmail.com

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

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

93% match

Loading thumbnail…

Scatter Plot with Menus with color scale and legend

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.

Rrajamrit-singh

93% match

Loading thumbnail…

Interactive Polished Scatter Plot with Menus and Colors and Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements through dropdown menus that switch the X and Y axes. Points are colored by species, with a color legend that fades non-hovered points for focused comparison. Built with React and D3 v7, the visualization uses D3's `scaleLinear` for axes and `scaleOrdinal` for categorical colors, rendering points as SVG circles. The code leverages React state for user selections and D3 utility functions like `csv` to load and parse the data.

Sstephanie0215

93% match

Loading thumbnail…

Fork of Scatter Plot with Menus and Colour and Legend

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between four flower measurements by switching the X and Y axes via dropdown menus. Each point is colored by species, with a legend clarifying the color encoding. The visualization is built with React functional components and renders SVG marks using D3 v5 scales. It leverages `d3.scaleLinear` for axes, `d3.scaleOrdinal` for categorical colors, and React state hooks to manage attribute selections.

NNikita Toropov

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

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

92% match