Fork of Interactive Color Legend

100%

Fork of Interactive Color Legend

✓ Published0🌍 Public

Last edited Aug 23, 2024

Created on Aug 23, 2024

This scatter plot of the Iris dataset shows the relationship between petal length and sepal width, with each point colored by species. An interactive color legend on the right allows hovering over a species to highlight its points and fade the others. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and a `ColorLegend` component that triggers hover events to filter and redraw the data.

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, colored by species. The visualization includes an interactive color legend; hovering over a species name in the legend highlights only the points of that species in full opacity, while all other marks fade to 20% opacity. Built with React and D3 v5, the example uses `d3.scaleLinear` and `d3.scaleOrdinal` for axes and color mapping, with SVG rendering for the marks and legend.

Mmengdong

97% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, plotting petal length against sepal width with points colored by species. Hovering over a species name in the color legend highlights only the corresponding points while fading the rest. The visualization is built with React and D3 v5, using `d3.scaleOrdinal` for color mapping and D3 scales for positioning. SVG rendering with interactive mouse events on legend ticks enables the filtering behavior.

Bbillmccabeusa@hotmail.com

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

96% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot uses the classic Iris Dataset to visualize petal length against sepal width, with species encoded by color. A color legend allows users to hover over species categories to highlight corresponding data points and fade the rest, revealing clusters and comparisons. Built with React and D3 v5, the visualization renders as an SVG and uses `scaleOrdinal` for color mapping, `scaleLinear` for axes, and mouse event handlers to manage hover states and opacity.

Cchiara01050105@gmail.com

96% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot displays the Iris dataset, mapping petal length against sepal width with points colored by species. A color legend on the right allows users to hover over a species name, which fades all non-matching points to 20% opacity while highlighting the selected group. The visualization uses React for the interface, d3.v5’s `scaleLinear` and `scaleOrdinal` for scaling, and renders as SVG. The code also includes native tooltips showing the x-axis value on hover.

TTOLBA Rafik

96% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot shows the Iris dataset, mapping petal length and sepal width while coloring points by species. A color legend to the right of the plot allows hovering over a species name to highlight the corresponding points and fade all others. The visualization is built with React and D3's scaleLinear, scaleOrdinal, and csv loading functions, rendering SVG marks and axes. Hover interactions are managed through React state, with fading applied by adjusting opacity on both the legend entries and data circles.

Hhung2606

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

96% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width and encoding species by color. Users can hover over a species in the color legend to highlight corresponding data points while dimming others to 20% opacity. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical coloring, and SVG circles for marks. The legend leverages mouse events to trigger state changes that filter the rendered data, creating a focused comparison between species groups.

JJONATHAN SIMON

96% match