Skip to main content
SimilarExport ZIP
100%

Interactive scatter multi-colored plot with menu

✓ Published0🌍 Public
JJulien Tremblay
Last edited Oct 25, 2024
Created on Oct 25, 2024

This interactive scatter plot displays the Iris dataset, letting users explore relationships between sepal and petal measurements. The visualization uses D3 scales to map data attributes to SVG coordinates, with React dropdown menus controlling which measurements appear on the x and y axes. A color legend assigns distinct hues to the three iris species, and hovering over a legend item filters the displayed points to that species. The chart renders marks as SVG circles with hover tooltips, while custom tick marks and axis labels provide context.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot with menu and colors

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.

Ppatasky
95% match
Loading thumbnail…

Interactive scatter Plot with menu

This interactive scatter plot explores the Iris Dataset, displaying measurements of sepal and petal dimensions for three flower species. Users can select which attributes to plot on the x-axis and y-axis using React Dropdown menus, with options for sepal length/width, petal length/width, and species. The visualization renders as an SVG using React components, with D3 scaleLinear functions mapping data ranges to pixel coordinates, and custom AxisBottom and AxisLeft components drawing tick marks and labels. Hovering over a circle reveals the corresponding measurement value via a native title tooltip.

JJulien Tremblay
95% match
Loading thumbnail…

Interactive scatter colored plot with menu

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements such as petal and sepal length and width. Users can change which attribute appears on each axis using two dropdown menus built with react-dropdown. The visualization is rendered as SVG using React components for the axes and marks, while d3.v5 utilities like `scaleLinear` and `extent` compute the scales and domains. Dropdown selections update the plotted data dynamically through React state, with axes labeled according to the selected attributes.

JJulien Tremblay
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 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 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

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…

Interactive Scatter with Menus

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 let viewers select which attributes appear on the x and y axes, while hovering over the color legend highlights points of a selected species and dims others. The visualization is built with React and D3 v5, using `scaleLinear` and `scaleOrdinal` for positioning and coloring, with SVG circles rendered through custom React components.

Mmbooch22
94% match