Skip to main content
Log in
M

Mohaimin-1935

@Mohaimin-1935·2 public vizzes

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.

Aug 21, 2021
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.

Aug 21, 2021