Scatter Plot with Interactive Legend

100%

Scatter Plot with Interactive Legend

✓ Published0🌍 Public

Last edited Aug 1, 2021

Created on Jul 30, 2021

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`.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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, 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

94% match

Loading thumbnail…

Interactive Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris Dataset from a gist, showing measurements of sepal length, width, petal length, and width for three iris species. Users select the x and y axes via React dropdowns, and hovering over the color legend highlights data points of a selected species while fading the others. The visualization uses d3.scaleLinear and d3.scaleOrdinal for scales, renders as SVG with React components, and implements the color legend with interactive hover events.

SSabin Bhandari

94% match

Loading thumbnail…

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width along the axes and encoding species with color. Hovering over a legend item highlights the corresponding species’ points while dimming others. Built with React and D3 v5, it uses `scaleOrdinal` for color, `scaleLinear` for positions, and custom React components for axes, marks, and the interactive legend. Data is loaded as CSV and rendered as SVG circles with tooltips.

NNelson M

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

94% 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 Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for three flower species. Hovering over the color legend highlights points of that species while dimming others, using React state to manage the hovered value and opacity transitions. Built with D3 v6 scales for positioning and color encoding, it renders as SVG through React components, with axis ticks generated by xScale.ticks() and yScale.ticks(), and tooltips provided by native SVG title elements.

WWolfgang

93% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between four measurements (sepal and petal length/width) through dropdown menus that control the x and y axes. Points are colored by species using a d3.scaleOrdinal with a corresponding legend showing the three Iris varieties. The visualization is built with React and D3 v6, rendering SVG circles and axes through custom components like AxisBottom, AxisLeft, and Marks, with data loaded via d3.csv from a remote gist.

CCodeDuckie99

93% match