Scatter Plot with Interactive Color Legend

100%

Scatter Plot with Interactive Color Legend

✓ Published0🌍 Public

Last edited Nov 23, 2023

Created on Nov 23, 2023

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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

97% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width with a color-coded legend for species. Built with React and D3 v5, it uses `scaleLinear` for axes and `scaleOrdinal` for color mapping, rendering SVG circles. Hovering over a legend item filters the marks via `onMouseEnter` and `onMouseOut`, fading non-matching points to a specified opacity. The axes are generated with custom `AxisBottom` and `AxisLeft` components, and the data is loaded asynchronously using `csv` from `useData`.

Iidwann-eng

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

96% match

Loading thumbnail…

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for three flower species. Hovering over the color legend highlights points of that species while dimming others, using React state to manage the hovered value and opacity transitions. Built with D3 v6 scales for positioning and color encoding, it renders as SVG through React components, with axis ticks generated by xScale.ticks() and yScale.ticks(), and tooltips provided by native SVG title elements.

WWolfgang

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

96% match

Loading thumbnail…

Scatter Plot with Interactive color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width, with each point colored by species. An interactive color legend allows hovering over a species to highlight its corresponding data points while fading the others. Built with React and D3 v5, the visualization uses SVG for rendering, with scales and axes from `d3.scaleLinear` and `d3.scaleOrdinal`, and custom React components for marks and legends, interacting through hover state to update point opacity.

SSushan Prajapati

96% match

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, showing petal length against sepal width with points colored by species. A categorical color legend identifies the three species. Built with React and D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG rendering. Axis components generate ticks, while hover tooltips display formatted values via the `title` element.

KK3zter

96% match