Fork of Interactive Color Legend

100%

Fork of Interactive Color Legend

✓ Published0🌍 Public

Last edited Nov 15, 2021

Created on Nov 15, 2021

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for three iris species. Users can hover over the color legend to highlight data points of a specific species while dimming others, implemented through React state management. The visualization uses D3 scale functions including `scaleLinear` for axes and `scaleOrdinal` for categorical colors, with SVG rendering for marks and axes. Data is loaded via `d3.csv` from a GitHub gist, and hover interactions are handled through mouse events in the `ColorLegend` component.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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

97% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot of the Iris dataset maps petal length against sepal width, with each species represented by a distinct color. Users can hover over the color legend to highlight points of a particular species while dimming all others, using React state for hover tracking. The visualization uses d3.scaleLinear, d3.scaleOrdinal, and d3.csv for data loading and scaling, with SVG rendering through React components for axes, marks, and the interactive legend.

Eevers-codeshop-ai

97% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for three iris species. Hovering over a species name in the color legend fades all non-matching data points while highlighting the selected species. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.csv for data loading. All marks and axes are rendered as SVG elements, with CSS transitions controlled by React state handling hover interactions.

Ddr-rompecabezas

97% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width for three iris species. Users can hover over the color legend to highlight a selected species while fading non-matching points, using React state management. The visualization uses d3.scaleLinear and d3.scaleOrdinal for positioning and color encoding, with SVG circles rendered via React components. Data is loaded asynchronously from a CSV using d3.csv, and axes are constructed with custom React components that generate SVG tick marks and labels.

MMohaimin-1935

97% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width, with each species colored and listed in a hoverable color legend. Hovering over a species name in the legend fades non-matching points to a low opacity while highlighting the corresponding data. Built with React and D3 v5, it uses `scaleLinear` and `scaleOrdinal` for positioning and color mapping, with SVG rendering for all marks and interactive legend elements. The data is loaded asynchronously from a CSV file using D3’s `csv` function.

Iihevs

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

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

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