Fork of Interactive Color Legend

100%

Fork of Interactive Color Legend

✓ Published0🌍 Public

Last edited Sep 15, 2024

Created on Sep 5, 2024

This example displays an interactive scatter plot of the Iris dataset, letting users explore relationships between four floral measurements by changing the X and Y axes via dropdown menus. It includes an ordinal color legend that dims and highlights data points when hovered, visually distinguishing the three iris species. Built with React and D3 v5, the visualization uses `scaleLinear`, `scaleOrdinal`, and the `csv` loader to parse data from a remote URL, rendering SVG circles, axes, and the legend through reusable React components.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatterplot of the Iris flower dataset lets users explore relationships between four measured attributes (sepal length/width, petal length/width) by selecting which attribute appears on each axis via drop-down menus. Points are colored by the three Iris species, with a color legend that fades the opacity of non-hovered classes and filters the underlying data on hover. Built with React and D3 v5, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color mapping, and renders marks as SVG circles with tooltips.

Eexchoco

95% match

Loading thumbnail…

Fork of Interactive Color Legend

This example presents an interactive scatter plot of the Iris dataset, mapping petal length and sepal width while coloring points by species. A color legend allows hovering over a species to highlight its corresponding points and fade the others. The visualization is built with React and D3 v5, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and SVG circles rendered by custom React components. Data is loaded asynchronously via `d3.csv` from a remote gist.

Llindy0119

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

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

93% match

Loading thumbnail…

Fork of Interactive Color Legend

A scatter plot of the Iris dataset uses React and D3 v5 to position circles by petal length and sepal width, colored by species. Hovering over a legend entry fades unrelated marks and highlights only the matching species. The visualization includes custom React components for axes, marks, and an interactive color legend built with SVG. Data loads via d3.csv from a GitHub gist and scales come from d3.scaleLinear and scaleOrdinal.

EElliot Hill

93% match