Scatter Plot with Interactive Color Legend

100%

Scatter Plot with Interactive Color Legend

✓ Published0🌍 Public

Last edited Feb 3, 2023

Created on Feb 3, 2023

Forked from Scatter Plot with 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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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

96% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot of the Iris dataset allows users to explore relationships between four flower measurements by selecting X and Y axes via dropdown menus. A color legend for species on the right serves as a filter: hovering over a species name highlights its corresponding data points while fading the others to 20% opacity. The visualization renders SVG circles with React, using d3.scaleLinear and d3.scaleOrdinal for positioning and color encoding, with axis components built from d3 scale ticks.

AAudrey

95% match

Loading thumbnail…

Scatter Plot with Interactive Legend

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.

SSam Hege

95% match

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 Color Legend[interactive]

A scatter plot of the Iris dataset with interactive dropdown menus to select the X and Y attributes. Color encodes the species of each flower, with a color legend that allows hovering to highlight a single species and fade the others. The visualization is built with React components and D3 scales, rendering marks as SVG circles. Axis labels update dynamically based on the selected attributes.

Aadewole-top

94% match

Loading thumbnail…

Scatter plot with color legend

This interactive scatter plot of the Iris dataset lets users explore relationships between four flower measurements by selecting which attributes appear on the x- and y-axes via two dropdown menus. Points are colored by species using a color legend built with React components. The visualization uses d3.scaleLinear for positioning, d3.scaleOrdinal for color mapping, and renders axes and marks as SVG elements within a React framework, with data loaded asynchronously via d3.csv.

AAndrea Picciau

94% match

Loading thumbnail…

Interective Colour Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between different measurements via dropdown menus that control the x and y axes. A color legend for species enables filtering through mouse hover, which fades non-matching points to reveal only the selected category. The visualization is built with React and D3 v5, using SVG rendering with scales from d3.scaleLinear and d3.scaleOrdinal, while the dropdown component comes from React Dropdown.

NNikita Toropov

94% match

Loading thumbnail…

Scatter Plot - React/D3 (Part 35) - Interactive Color Legend

This interactive scatter plot displays the Iris dataset, using drop-down menus to select which measurements appear on each axis and color-coding points by species. An interactive color legend highlights points of a selected species while dimming others on mouse hover. Built with React and D3 v5, the visualization uses `scaleLinear`, `scaleOrdinal`, and SVG rendering with radial gradients for point fills. The legend and dropdowns respond to hover and change events, providing a focused exploration of species distributions across four flower attributes.

TTom-S82

94% match