Color legend

Color Legend

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width. A color legend categorizes the three iris species, and hovering over a legend item highlights the corresponding points while fading the rest. The visualization uses React with ReactDOM, D3 v5’s `scaleLinear`, `scaleOrdinal`, and `extent` for scales, and renders SVG circles with tooltips. Data is loaded asynchronously via `csv`, and interactivity is managed through React state hooks.

AAnthony Zornig

Interactive Color Legend

A scatter plot of the Iris Dataset displays sepal length against sepal width, with points colored by species via a categorical scale. Hovering over the color legend highlights that species' points while fading others to 20% opacity. The visualization uses React with d3-scale for linear and ordinal scales, rendering SVG circles and axes with custom components. Data loads from a CSV via d3.csv, and interactivity relies on React state for hovered values.

GGayan Priyadarshana

Scatterplot with Color Legend

This scatterplot visualizes the Iris flower dataset, plotting sepal length against sepal width with points colored by species. A color legend maps species names to distinct hues, while axis labels and tick marks provide scale context. Built with React and D3 v7, the example uses `scaleLinear` for positioning, `scaleOrdinal` for categorical colors, and custom reusable components like `AxisBottom`, `AxisLeft`, and `ColorLegend` to render SVG elements. Data is loaded asynchronously via `csv` from a remote URL.

Aafcchilders

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing sepal length against sepal width for three iris species. Each point is color-coded by species using a d3.scaleOrdinal, with a custom legend displaying the color mapping. The visualization uses React with D3 scales and axes (d3.scaleLinear, d3.axisBottom, d3.axisLeft) rendered as SVG elements. Hovering reveals a tooltip via SVG `<title>` elements, and the data is loaded asynchronously with d3.csv.

GGayan Priyadarshana

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal length against sepal width with points colored by species. Hovering over the color legend highlights the corresponding species by increasing the opacity of its data points while fading others. The visualization uses React with D3 v7 scales and SVG rendering, including custom AxisBottom, AxisLeft, Marks, and ColorLegend components. The color legend employs mouse events to trigger the hover state, with the ordinal color scale mapping three distinct species to individual colors.

SSong Tao Chen

Interactive color legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal width against sepal length with points colored by species via a D3 ordinal color scale. Hovering over the color legend highlights the corresponding species by increasing opacity of matching circles while dimming others. The visualization uses React with the d3.scaleLinear and d3.scaleOrdinal APIs, rendering SVG elements through React components. Data is loaded asynchronously with d3.csv, and interactivity is managed through React’s useState hook for tracking hovered values.

MMinh Luong

Interactive Colour Legend

This interactive scatter plot visualizes the Iris flower dataset, showing sepal width against sepal length with points colored by species. A color legend allows users to hover over species names, highlighting only that species’ data points while dimming others. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and SVG circles, with data loaded via `d3.csv` from a public GitHub repository.

Bbsolomon103

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, displaying sepal length against sepal width for three flower species. Each circle’s color encodes species membership, with a color legend positioned to the right identifying the categories. Built with React and D3 v7, the chart uses `scaleLinear` for axes, `scaleOrdinal` for color mapping, and custom SVG components for axes, marks, and legend. Data loads from a remote CSV via `d3.csv`, with hover tooltips providing exact values.

Ddaneslutzky