Skip to main content
SimilarExport ZIP
100%

Scatterplot with Interactive Color Legend

✓ Published0🌍 Public
CChris Knight
Last edited Jun 27, 2022
Created on Jun 27, 2022

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.

AI-generated description

A scatterplot of the Iris Dataset using D3 utilities, and uses React to render the data as a scatterplot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Interactive Color Legend

A scatter plot of the Iris Dataset shows petal length against sepal width, with each point colored by species. The visualization uses React with D3 scales to map data to SVG coordinates. An interactive color legend allows hovering over species labels to highlight only the corresponding points, dimming all others. The code implements this interaction through React state management, re-rendering marks with adjusted opacity when the hovered species changes.

FFulvio Vigilante
96% match
Loading thumbnail…

Scatterplot with Color Legend

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Users can dynamically select which attributes to plot on the X and Y axes via dropdown menus, while a color legend distinguishes species using a categorical d3 scaleOrdinal palette. The visualization is rendered as an SVG using React components, with d3 scaleLinear handling axis scaling and the d3 csv loader fetching the dataset. Marks are drawn as circles with tooltips showing the x-axis value.

CChris Knight
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
95% 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
95% match
Loading thumbnail…

Scatterplot with Color Legend

This interactive scatterplot displays the Iris Dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that control the x and y axes. Each point represents an iris flower, colored by species with a corresponding legend. The visualization uses React components and D3 v7 scales (d3.scaleLinear, d3.scaleOrdinal) to render SVG marks and axes from CSV data.

JJun Suzuki
95% 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
95% match
Loading thumbnail…

Scatter Plot Iris with Color Legend

An interactive scatter plot of the Iris dataset with dropdown menus to select the x and y axes shows the relationship between sepal and petal measurements. The visualization uses React for the UI, d3.v7's scaleLinear, scaleOrdinal, and extent for scales, and renders as SVG with color-coded circles representing species. A color legend identifies the three Iris species, while axis labels and dropdown selectors update dynamically as users change the plotted attributes.

EEFezerKW
95% 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
95% match