Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Interactive Legend

✓ Published0🌍 Public
SSam Hege
Last edited Oct 13, 2022
Created on Oct 13, 2022

This scatter plot visualizes the Iris dataset, letting users select which flower measurements appear on the x- and y-axes via dropdown menus. An interactive color legend highlights individual species on hover by fading non-matching points, using React state to manage selection. The chart is rendered with SVG elements, with scales and axes built using d3.scaleLinear and custom React components for the legends and marks.

AI-generated description

A program that loads and visualizes some data

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to compare different flower measurements by selecting X and Y axes from dropdown menus. The chart displays all data points as colored circles representing species, with an interactive color legend that highlights a selected species while fading others. The visualization is built with React and D3 utilities including scaleLinear and scaleOrdinal, rendered as SVG. Hovering over legend items filters the data, making it easy to explore relationships between sepal and petal dimensions across the three iris species.

LLaura Johnson
95% match
Loading thumbnail…

Scatter Plot with Interactive Legend

A scatter plot of the Iris dataset rendered in SVG using React and D3 v5. It displays measurements of iris flowers, with dropdown menus to switch the X and Y axes between sepal and petal dimensions, alongside a color-coded legend for species. Hovering over a legend entry fades non-matching data points, implemented through React state and D3's `scaleLinear` and `scaleOrdinal`. The plot includes axis ticks and labels from custom React components, with data loaded via `d3.csv`.

Jj-PGi
95% match
Loading thumbnail…

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying measurements like petal length and sepal width as colored points. Users can explore the data by selecting different attributes from dropdown menus to change the x and y axes, while hovering over the color legend highlights points of a selected species and fades the rest. Built with React and D3 v5, the visualization uses scales and SVG rendering to create the chart, with React state managing attribute selections and hover interactions.

Ee-ines
95% match
Loading thumbnail…

Scatter plot with interactive color legend

This interactive scatter plot visualizes the Iris dataset, showing relationships between flower measurements selected via dropdown menus. A color legend on the right highlights points by species, dimming all other data when a species is hovered. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and renders SVG circles with tooltips. The dataset is loaded as CSV and parsed into numeric values for plotting.

AAlex Stulov
95% match
Loading thumbnail…

Scatter plot with color legend

An interactive scatter plot of the Iris Dataset allows users to select which flower measurements to display on the x and y axes via dropdowns. The plot uses D3.js v7 scale functions to map data to SVG coordinates and a color legend to distinguish three iris species. The React code renders the plot declaratively, with custom components for axes, marks, and the legend, using D3’s data loading from a CSV URL.

AAlex Stulov
95% match
Loading thumbnail…

Scatter Plot with Interactive Color Legend

This scatter plot visualizes the Iris dataset, showing relationships between four flower measurements with the x and y axes controlled by dropdown menus. The color legend is interactive: hovering over a species option fades non-matching points to 20% opacity while keeping the selected species fully visible. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for species colors, and inline SVG circles for data points. Dropdown components from react-dropdown handle attribute selection for both axes.

MMichael Bruno
95% match
Loading thumbnail…

Scatter Plot Iris with Interactive Color Legend

This interactive scatter plot displays the classic Iris dataset, mapping selected measurements like petal length and sepal width onto the x- and y-axes via dropdown menus. The species of each flower is encoded through an ordinal color scale and shown in a legend. Hovering over a legend entry highlights matching data points while fading others, using mouse events and opacity transitions. The visualization is built with React, D3’s `scaleLinear` and `scaleOrdinal`, and rendered as SVG elements like circles from the `Marks` component.

EEFezerKW
94% match
Loading thumbnail…

scatter plot with legend

This interactive scatter plot visualizes the Iris flower dataset, where users can select different attributes for the x and y axes via dropdown menus. The visualization displays the relationship between selected measurements, with each species represented by a distinct color. A native SVG legend allows users to hover over species names to highlight their corresponding data points while fading others. The visualization uses React components to build the SVG marks, axes, and legend, leveraging D3's `scaleLinear`, `scaleOrdinal`, and `extent` functions for data scaling and color mapping.

MMohammed Banani | MbDev
94% match