Skip to main content
SimilarExport ZIP
100%

Interactive Color & Legend - Iris Flower Scatter Plot -

✓ Published0🌍 Public
AAndres de la Garza
Last edited Mar 21, 2021
Created on Mar 21, 2021

This interactive scatter plot visualizes the Iris flower dataset, encoding sepal length and width on the x and y axes while color-coding points by species. Hovering over a legend item highlights the corresponding species by fading other points to 20% opacity. Built with React and D3 v6, it uses `scaleLinear`, `scaleOrdinal`, and `extent` for scales, with custom `AxisBottom`, `AxisLeft`, `ColorLegend`, and `Marks` components rendering SVG circles.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal length against sepal width with points colored by species. Hovering over the color legend highlights the corresponding species by increasing the opacity of its data points while fading others. The visualization uses React with D3 v7 scales and SVG rendering, including custom AxisBottom, AxisLeft, Marks, and ColorLegend components. The color legend employs mouse events to trigger the hover state, with the ordinal color scale mapping three distinct species to individual colors.

SSong Tao Chen
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
95% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, encoding sepal and petal measurements along the x and y axes with species indicated by color. Users can dynamically change the plotted attributes via dropdown menus. Hovering over a color legend item fades all points of other species, allowing for focused comparison. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and renders points as SVG circles.

JJun Suzuki
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatterplot displays the Iris dataset, plotting sepal and petal measurements against each other with species encoded by color. Hovering over a species in the color legend dims all other data points while highlighting the selected species. Users can change the X and Y axes via dropdown menus. The visualization uses React with D3 scales for positioning and coloring, rendering SVG circles and axis ticks through custom React components.

Ssmile2git
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot of the Iris dataset uses React and D3 v6 to visualize sepal length and width, colored by species. Hovering over a color legend entry highlights matching data points while fading others to 20% opacity, using React state to track the hovered value. The visualization employs d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for loading data from a gist. SVG rendering creates the plot, axes, and an interactive color legend that filters marks dynamically.

AAnthony Ynami
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, plotting sepal length against sepal width. Users can hover over the color legend to highlight data points of a specific species, which fade all other points to 20% opacity. The visualization uses D3.js scales for positions and colors, rendered as SVG through React components. The legend is built using D3's `scaleOrdinal` domain mapping, with hover events managed by React's `useState` hook.

Aafcchilders
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatterplot displays the Iris flower dataset, mapping sepal length and width for three species. Hovering over the color legend highlights points of that species while fading the others. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, `extent`, and `csv` to load and scale data, while custom React components for axes, marks, and legend handle interactive filtering through state.

Ffjvoris
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width. The chart uses color-encoded circles to represent different iris species, with hover interactions on the legend highlighting data points of a selected species. Built with React and D3 (d3.scaleLinear, d3.scaleOrdinal), the visualization renders as SVG, featuring both full and filtered data marks with faded opacity for non-selected categories.

Yyptang5488
94% match