Skip to main content
SimilarExport ZIP
100%

Scatter plot with menu and colors

✓ Published0🌍 Public
Ppatasky
Last edited Jun 14, 2021
Created on Jun 14, 2021

This interactive scatter plot visualizes the Iris dataset, showcasing measurements of sepal and petal dimensions. Users can dynamically select which attributes to display on the X and Y axes via dropdown menus. Hovering over the color legend highlights a specific species, fading the remaining data points to emphasize the selected group. Built with React and D3 v5, the visualization renders as an SVG and uses `scaleLinear` for axis scaling and `scaleOrdinal` for categorical coloring.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot w/ menu

This interactive scatter plot uses React and D3 to visualize the Iris flower dataset. Users explore relationships between sepal and petal measurements by selecting attributes for the x and y axes from dropdown menus. The plot encodes species using color, and hovering over the color legend highlights points of that species while fading others. The SVG visualization builds axes with D3 scales, formats tick labels with `d3.format`, and links the dataset via a custom React hook.

CCarlos Caballero
95% match
Loading thumbnail…

Scatter Plot with Menu

This interactive scatter plot visualizes the Iris dataset, allowing users to switch between different sepal and petal measurements on the x and y axes using two dropdown menus. The chart uses d3.scaleLinear for axes, d3.scaleOrdinal for species colors, and SVG circles rendered via React components. Hovering over a species in the color legend fades non-matching points using React state, while the MarksWithFade component manages mouse events to provide interactive feedback.

Llaurajchang
95% match
Loading thumbnail…

Scatter Plot With Menu

This interactive scatter plot visualizes the Iris Dataset, a classic multivariate flower dataset from a gist by Curran. Users can dynamically select which sepal or petal measurements appear on the X and Y axes using dropdown menus, and the plot updates accordingly. The visualization encodes species through color, with a color legend that supports hover interactions to fade non-matching points. Built with React and D3 v5, it renders axes, circles, and legend items as SVG elements, using scaleLinear, scaleOrdinal, and extent for scaling the data.

AAliaksandr
95% match
Loading thumbnail…

Interactive Color Polished Scatter plot with menus with legend

This interactive scatter plot displays the Iris dataset, showing measurements of sepal and petal dimensions across three flower species. Users select which attributes appear on the X and Y axes via two dropdown menus, while a color legend indicates species and supports hover highlighting to isolate specific groups. The visualization is built with React and D3 v5, using `scaleLinear`, `scaleOrdinal`, and SVG rendering, with hover interactions adjusting point opacity and filtering displayed data.

Nn.koldovsky@gmail.com
95% match
Loading thumbnail…

Scatter Plot with Colors and Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers independently select which attribute appears on the x- and y-axes, while the chart updates dynamically using React state management. The visualization is built with D3 v7 for scales, axes, and SVG rendering, and React for component structure and user interaction. Data is loaded asynchronously via D3's `csv` utility, and tooltips display values on hover.

Jjbruzzo
95% match
Loading thumbnail…

Scatter Plot with Menu

A scatter plot of the Iris dataset, implemented in React with D3.js for scales and rendering to SVG, allows exploration of relationships between sepal and petal measurements. Two dropdown menus select the attributes mapped to the x and y axes, while species determines point color. Hovering over a species in the color legend highlights only its points by filtering the data, with non-hovered points dimmed. The code uses D3's `scaleLinear`, `scaleOrdinal`, and `extent` for scales and data ranges.

Uuplusv
95% match
Loading thumbnail…

Color Polished Scatter plot with menus with legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting attributes for the X and Y axes via dropdown menus. A color legend distinguishes the three iris species. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading, rendering as SVG with reusable axis and mark components.

Nn.koldovsky@gmail.com
95% match
Loading thumbnail…

Scatter Plot With Menue

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus control which measurements appear on the x and y axes, while a color legend enables highlighting individual species by dimming others. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and renders SVG circles positioned via x and y scales, with native tooltips on hover.

AAnkit5ingh
95% match