Fork of Interactive Color Legend

100%

Fork of Interactive Color Legend

✓ Published0🌍 Public

Last edited Oct 26, 2021

Created on Oct 26, 2021

This interactive scatter plot displays the Iris dataset, mapping petal length and sepal width for different species. Hovering over a color legend dims non-matching data points, allowing users to isolate a single species. The visualization uses React with D3.js for scales and axes, rendering circles via SVG. The code defines custom `Marks`, `AxisBottom`, `AxisLeft`, and `ColorLegend` components, using `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.extent` for data handling.

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

96% match

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

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

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

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

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

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

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

95% match