Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Interactive Color Legend

✓ Published0🌍 Public
LLaura Johnson
Last edited May 12, 2021
Created on Apr 23, 2021

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.

AI-generated description

Scatter Plot with menus using The Iris Dataset using D3 utilities and React.

MIT Licensed

Similar vizzes

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
96% 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
96% match
Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to compare sepal and petal measurements across three flower species through dropdown menus for the x and y axes. Each point is colored by species using a d3.scaleOrdinal color scale with an accompanying legend. Built with React and D3 v6, the visualization renders as an SVG and uses d3.scaleLinear for axes, d3.extent for domain calculation, and d3.csv for data loading.

LLaura Johnson
96% match
Loading thumbnail…

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species. The visualization uses hover interactions on the color legend to highlight data points of a selected species while dimming others. Built with React and rendered as SVG using D3 v6 scales, the interface features dropdown menus for selecting X and Y axis attributes alongside the color-coded species legend.

RRMartins11
96% 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
96% 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
96% 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 Color Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between different measurements (sepal length, sepal width, petal length, petal width) by selecting attributes for the x and y axes via React dropdown menus. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color encoding of species, and renders circles as SVG marks. React state management tracks the selected attributes, while d3.csv loads the data and d3.format formats axis tick labels, with a color legend indicating species.

CChristian Potdevin
95% match