Skip to main content
SimilarExport ZIP
100%

React Color Legend

✓ Published1🌍 Public
RRohit Reddy Gottam
Last edited Jun 6, 2020
Created on Jun 6, 2020

A React-based scatter plot visualizing the Iris dataset maps petal length and sepal width, encoding species by color. Interactive hover on the color legend highlights points of the selected species while dimming others. Built with D3 v5 for scales and CSV parsing, it uses React components for axes, marks, and the legend, rendering SVG via react-dom.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

React Color Legend

An interactive scatter plot of the Iris dataset rendered in SVG using React and D3, comparing petal length against sepal width with points colored by species via `d3.scaleOrdinal`. A custom React color legend component displays the three species, and hovering over a legend entry fades non-matching points to 20% opacity while re-rendering only the selected species highlights on top. Axes are generated with `d3.scaleLinear`, `d3.extent`, and `d3.format`, with data loaded asynchronously through D3’s `csv` parser.

Aarths-glitch
95% match
Loading thumbnail…

Interactive Colour Legend

This interactive scatter plot displays the Iris dataset, mapping petal length against sepal width with species indicated by color. The React-based visualization uses D3.js scales (scaleLinear, scaleOrdinal) and SVG rendering. Users can hover over the color legend to highlight points from a specific species while dimming others, achieved through React state management (useState) that toggles opacity values on the marks and legend items. The data loads asynchronously via D3's csv parser.

CChris Briggs
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width, with each species distinguished by color. Hovering over the color legend highlights points from the corresponding species while dimming all others, making species comparisons intuitive. Built with React and rendered as SVG, it uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and custom React components for axes, marks, and the interactive legend. Data is loaded asynchronously from a CSV using d3.csv, with tooltips provided via SVG title elements.

AAgustina Farias
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot uses React and D3.js to visualize the Iris dataset, displaying petal length against sepal width. A color legend maps each species to a distinct color, and hovering over a legend entry highlights data points of that species while fading all others to 20% opacity. The visualization employs D3's `scaleLinear` for axes, `scaleOrdinal` for the color mapping, and SVG circles for data marks, with axes generated by custom React components from the provided files.

Xxiaoma1002
94% match
Loading thumbnail…

Interactive Color Legend

This scatter plot displays the classic Iris dataset, mapping petal length and sepal width with dots colored by species. Hovering over a species name in the color legend fades out all other points, highlighting the hovered category. Built with React and rendered as SVG, the visualization uses D3 scales (scaleLinear, scaleOrdinal) and custom components for axes and the interactive legend. The data loads via D3’s csv function, with hover effects managed through React state.

Ttharuta
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width and using color to distinguish species. The visualization includes a color legend that responds to hover events, dimming all data points except those matching the hovered species. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for the categorical color mapping, and SVG elements rendered declaratively through React components. The code implements hover interactions by tracking state and applying opacity transitions via the `ColorLegend` component.

Qqtrfx
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. A React-based color legend on the right allows users to hover over species names, which highlights only the corresponding points while fading others to 20% opacity. The visualization uses d3.scaleLinear and d3.scaleOrdinal for positioning and coloring, with SVG rendering through React components that map data to circles and axis ticks. Data is loaded asynchronously via d3.csv from a GitHub gist.

AAgustina Farias
94% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width with points colored by species. A color legend on the right highlights one species at a time when hovered, fading the remaining points to 20% opacity for emphasis. Built with React and d3.v5, it uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading. SVG rendering is handled through React components, with hover interactions managed via onMouseEnter and onMouseOut events on legend ticks.

Wwenleicao
94% match