Fork of Interactive Color Legend

100%

Fork of Interactive Color Legend

✓ Published0🌍 Public

Last edited Mar 23, 2022

Created on Mar 23, 2022

A fork of the Interactive Color Legend visualizes the Iris Dataset as a scatter plot of petal length against sepal width. Built with React and rendered as SVG using D3 scales, circles are colored by species via a `scaleOrdinal` mapping. Hovering over the custom `ColorLegend` groups highlights the matching species by filtering the data and applying a fade opacity to unrelated marks. The implementation uses `AxisBottom`, `AxisLeft`, and `Marks` components, with data loaded asynchronously via D3’s `csv` parser.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Interactive Color Legend

A scatter plot of the Iris dataset shows petal length against sepal width, with points colored by species. Hovering over a species in the color legend highlights only that species’ points while dimming others. The visualization uses React with D3 v5 scales and axes, including `scaleLinear`, `scaleOrdinal`, `AxisBottom`, and `AxisLeft`. The custom `ColorLegend` component handles hover interactions, while `Marks` renders the SVG circles with tooltips. Data is loaded via `d3.csv` from a GitHub gist.

MMohaimin-1935

94% match

Loading thumbnail…

Fork of Interactive Color Legend

A scatter plot of the Iris dataset shows how petal length and sepal width relate across three flower species, with a color-coded legend that filters data points on hover. Built with React and rendered as SVG using D3 v5 scales (`scaleLinear`, `scaleOrdinal`), the visualization uses circle marks and interactive legend ticks that fade unrelated points. The legend and axes are constructed from reusable components, and the data is loaded via D3’s CSV parser.

Mmfakboo

94% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width. A React component renders SVG circles colored by species using d3.scaleOrdinal, while d3.scaleLinear handles x and y positioning. Hovering over the color legend highlights points of that species and fades all others to 20% opacity. Axes are built with custom React tick components, and data loads asynchronously via d3.csv.

YYedrup

94% match

Loading thumbnail…

Fork of Interactive Color Legend

YYedrup

94% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. Hovering over a species label in the color legend fades non-matching points to 20% opacity while highlighting the selected group. Built with React and D3 v5, the code uses `scaleLinear`, `scaleOrdinal`, and `csv` for data loading, rendering SVG circles and axes via reusable components. The color legend triggers hover events through React state to dynamically filter and emphasize data points.

MMatthew Talty Colvard

94% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. Users can hover over the color legend to highlight a selected species while dimming all other data points. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and d3.csv for data loading. React manages state for hover interactions, while SVG elements render the axes, legend, and data marks. The code also includes reusable AxisBottom, AxisLeft, ColorLegend, and Marks components.

AAnkit-Ian-53787

94% match

Loading thumbnail…

Fork of Interactive Color Legend

A scatter plot of the Iris dataset shows petal length versus sepal width, with points colored by species. Hovering over a species in the color legend dims all other points and highlights only that species. The visualization uses React components with D3 scales from `d3.scaleLinear` and `d3.scaleOrdinal`, rendering as SVG circles and axis ticks. Data is loaded via `d3.csv` from a GitHub Gist.

GGeekboxer

94% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset with petal length on the x-axis and sepal width on the y-axis, colored by species. It uses D3 scales for positioning and color encoding, with React components rendering SVG circles and axes. Hovering over a species in the color legend highlights only the corresponding data points while dimming the rest, leveraging D3's scaleOrdinal and React state for interactivity. The data is loaded via d3.csv from a remote Gist.

RRecep Tiryaki

94% match