scatter plot with legend

100%

scatter plot with legend

✓ Published1🌍 Public

Last edited May 18, 2022

Created on May 11, 2022

Forked from scatter plot with menus polished

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.

AI-generated description

scatter plot with react and d3

[Data (https://gist.github.com/curran/a08a1080b88344b0c8a7).

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Legend

This example shows an interactive scatter plot of the Iris Dataset, where users can choose which numeric attribute to display on the x- and y-axes via dropdown menus. Each point represents a flower sample, colored by species and accompanied by a legend. The visualization is built with React and rendered as SVG, using d3.scaleLinear and d3.scaleOrdinal for scales, while d3.csv loads the data from a remote gist.

Jj-PGi

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

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…

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

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

93% match

Loading thumbnail…

Scatter plot and color legend

This interactive scatter plot of the Iris flower dataset allows users to select which numeric attributes to plot on the x- and y-axes via React dropdown menus. Points are colored by species using a d3.scaleOrdinal with a custom color legend built from SVG circles. The visualization uses React components for axes, marks, and legend, with D3’s scaleLinear and extent for scaling. Data is loaded asynchronously from a CSV file using d3.csv.

EElliot Hill

93% match

Loading thumbnail…

scatter with legend

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three species. A legend uses color to distinguish species, while dropdown menus let viewers change which attributes appear on the x- and y-axes. Built with React, the visualization uses D3 scales (d3.scaleLinear, d3.scaleOrdinal) to map data to SVG coordinates and colors. The interface includes axis components, a color legend rendered as circles, and tooltips showing formatted values, with data loaded from a CSV file.

Mmarianamartins87

93% match

Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to compare any two measured attributes. Positioned on the x- and y-axes are dropdown-selected variables, while color encodes the flower species. The visualization uses React for the interface and D3 v7’s `scaleLinear`, `scaleOrdinal`, `csv`, and `extent` to load and map data to SVG circles. Hovering over a point reveals its exact value via a native tooltip. A color legend with categorical swatches clarifies the species mapping.

KKazushige Okuma

93% match