Scatter plot with interactive color legend

Scatterplot with Interactive Color Legend

This scatterplot displays the Iris flower dataset, plotting sepal and petal measurements and coloring points by species. Interactive dropdowns let viewers change which measurement is mapped to the x- and y-axes. The color legend responds to mouse hover, fading non-hovered species to 30% opacity while highlighting the selected group. Built with React and D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` for categories, and SVG circles for rendering.

ZZoe Ferencova

interactive color legend

This interactive scatter plot of the Iris dataset allows users to explore relationships between sepal and petal measurements using dropdown menus to select variables for the x and y axes. The color legend for species is interactive: hovering over a legend item fades all other points to 20% opacity, highlighting the selected species in SVG circles rendered with React. The visualization uses d3-scale for linear and ordinal scales, d3-format to tick labels, and react-dropdown for the axis selectors, with CSV data fetched from a GitHub gist.

Ssurikmeetr

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species. The visualization uses hover interactions on the color legend to highlight data points of a selected species while dimming others. Built with React and rendered as SVG using D3 v6 scales, the interface features dropdown menus for selecting X and Y axis attributes alongside the color-coded species legend.

RRMartins11

Scatterplot with Color Legend

This interactive scatterplot displays the Iris Dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that control the x and y axes. Each point represents an iris flower, colored by species with a corresponding legend. The visualization uses React components and D3 v7 scales (d3.scaleLinear, d3.scaleOrdinal) to render SVG marks and axes from CSV data.

JJun Suzuki

Interactive Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris Dataset from a gist, showing measurements of sepal length, width, petal length, and width for three iris species. Users select the x and y axes via React dropdowns, and hovering over the color legend highlights data points of a selected species while fading the others. The visualization uses d3.scaleLinear and d3.scaleOrdinal for scales, renders as SVG with React components, and implements the color legend with interactive hover events.

SSabin Bhandari

Scatter Plot with Interactive Color Legend

A scatter plot of the Iris Dataset shows petal length against sepal width, with each point colored by species. The visualization uses React with D3 scales to map data to SVG coordinates. An interactive color legend allows hovering over species labels to highlight only the corresponding points, dimming all others. The code implements this interaction through React state management, re-rendering marks with adjusted opacity when the hovered species changes.

FFulvio Vigilante

Scatterplot with Interactive Color Legend

This interactive scatterplot displays the Iris dataset, plotting petal length against sepal width. Users can switch the X and Y axes using dropdown menus, and hover over the color legend to isolate a specific species of iris. The visualization uses D3 to handle data loading, scales, and layout, while React components render the SVG elements, including the axes, data points, and interactive legend.

CChris Knight

Interactive Colors Legend

This interactive scatterplot displays the Iris flower dataset, letting users explore relationships between sepal and petal measurements across three species. Users select X and Y axis attributes via dropdown menus, while a color legend on the right encodes species with interactive hover highlighting. The visualization uses React with d3-scale for linear and ordinal scaling, d3.csv for data loading, and SVG rendering. Hovering over a legend entry fades non-matching points and highlights the selected species, providing focused comparison within the dataset.

Kkragovic