Fork of Interactive Color Legend

100%

Fork of Interactive Color Legend

✓ Published0🌍 Public

Last edited Aug 18, 2024

Created on Aug 18, 2024

This example shows a scatter plot of the Iris Dataset, mapping petal length and sepal width along the axes and coloring each point by species. Hovering over a species name in the color legend fades non-matching points to 20% opacity and re-renders them at full opacity, built with React components and D3 scales (scaleLinear, scaleOrdinal). SVG circles render the marks, with axes from custom AxisBottom and AxisLeft components.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Interactive Color Legend

This example visualizes the Iris dataset as a scatter plot, mapping petal length and sepal width on the axes while coloring points by species. A custom interactive color legend, built with React and D3.js scaleOrdinal, is placed to the right; hovering over a legend entry fades unrelated points and highlights only the selected species. The rendering uses SVG circles generated from D3.js scaleLinear scales, with axes drawn from D3’s tick formatter.

Eeourm20

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

96% match

Loading thumbnail…

Fork of Interactive Color Legend

YYedrup

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

95% 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. Built with React and D3 v5, it uses d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and SVG circles for marks. Hovering over a species in the color legend highlights only those data points while fading the rest, using React state for hover tracking. Native SVG `<title>` elements provide tooltips showing the petal length value for each point.

Hhenry c

95% match

Loading thumbnail…

Fork of Interactive Color Legend

This example displays the classic Iris dataset as a scatter plot of petal length against sepal width, with points colored by species. Hovering over a species in the interactive color legend highlights only the corresponding points while fading the rest. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes, `scaleOrdinal` for colors, and reusable axis components. The legend itself is implemented as a custom `ColorLegend` component that manages hover states and applies a configurable fade opacity to non-matching data points.

JJesus Angel

95% match