Fork of Interactive Color Legend

Fork of Interactive Color Legend

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length against sepal width with colored circles representing species. Built with React and D3 v5, it uses `scaleLinear` for axes and `scaleOrdinal` for color mapping. An interactive color legend allows hovering over species names, which filters the displayed points by fading non-matching species while highlighting the selected group. The SVG rendering includes axes from `AxisBottom` and `AxisLeft`, with tooltips provided through SVG `<title>` elements.

CCherynJ

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

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

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width, with each point colored by species. Hovering over a species in the color legend highlights only points of that species by increasing their opacity while dimming others. The visualization uses React with D3 scales, including `d3.scaleLinear` for axes and `d3.scaleOrdinal` for colors. It fetches data via `d3.csv` and renders all marks and the legend as SVG circles.

CCheng Tang

Cchiara01050105@gmail.com

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.

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

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

Bbillmccabeusa@hotmail.com

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.