Interactive Scatter Plot with Color Legend & Changeable Axes using D3 and React

100%

Interactive Scatter Plot with Color Legend & Changeable Axes using D3 and React

✓ Published1🌍 Public

Last edited Nov 22, 2021

Created on Nov 22, 2021

Forked from Scatter Plot with Color Legend

This interactive scatter plot visualizes the classic iris dataset, allowing users to explore relationships between sepal and petal measurements. The chart uses React and D3 v5 with SVG rendering, featuring dropdown menus to change the X and Y axes, which updates the plotted points and axis labels. A color legend maps the three iris species, and hovering over a species in the legend highlights its data points while dimming others. The code uses `scaleLinear` for axes, `scaleOrdinal` for color encoding, and React's `useState` to manage interactive state.

AI-generated description

A stylized scatter plot of the famous iris data set, using React to create menus and interactivity.

A more saturated color represented overlapping data points.

Selecting different options from the X and Y dropdown menus will change the axes on which the data is plotted, with labels to match.

Hovering over the species color legend will single out that species in the display.

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

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

92% match

Loading thumbnail…

interactive color legend iris scatter plot

This interactive scatter plot displays the classic Iris dataset, mapping sepal and petal measurements along user-selectable x and y axes. A color legend categorizes the three iris species, and hovering over a species name dims the other points to highlight the selected group. Built with React and D3 v5, the visualization uses dropdown menus to swap axes and D3 scales (scaleOrdinal, scaleLinear) to position circles and assign colors. SVG rendering handles the marks and axes, while the legend’s mouse events filter and emphasize data by species.

GGuitong Li

92% match

Loading thumbnail…

Scatterplot with Interactive Color Legend

This interactive scatterplot displays the Iris dataset, plotting petal length against sepal width. Users can switch the X and Y axes using dropdown menus, and hover over the color legend to isolate a specific species of iris. The visualization uses D3 to handle data loading, scales, and layout, while React components render the SVG elements, including the axes, data points, and interactive legend.

CChris Knight

92% match

Loading thumbnail…

Interactive Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, plotting petal length against sepal width with each species represented by a distinct color. The visualization uses React and d3-scale functions (scaleLinear, scaleOrdinal) to map data to positions and colors. Hovering over the color legend highlights only the points belonging to that species while fading all others, with the legend item and matching data points responding to mouse events. The chart renders as SVG with custom AxisBottom and AxisLeft components.

KKtuzinowski

92% match

Loading thumbnail…

Scatter Plot with Color

Interactive scatter plot of the Iris dataset using React, D3 v5, and SVG, which visualizes relationships between sepal and petal measurements. Users can switch the X and Y axes via dropdown menus to explore different attribute combinations. A categorical color scale (`d3.scaleOrdinal`) distinguishes the three iris species, with `d3.scaleLinear` mapping numeric coordinates. The plot includes formatted axes and tooltips showing values on hover.

RRajat Dangat

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

91% match

Loading thumbnail…

Interactive Scatter Plot With Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width and coloring points by species. A color legend allows users to hover over species labels to highlight only the corresponding data points while dimming others. The visualization is built with React and D3 v5, using d3.scaleLinear for positioning, d3.scaleOrdinal for categorical colors, and custom SVG components for axes and marks. Data loads asynchronously via d3.csv from a GitHub gist.

KKolezhannochka

91% match