Skip to main content
SimilarExport ZIP
100%

Improved Scatterplot with Interactive Color Legend

✓ Published0🌍 Public
KKai Stewart
Last edited Nov 15, 2021
Created on Nov 15, 2021

This interactive scatterplot visualizes Fisher’s Iris dataset, loaded via `d3.csv` from a GitHub Gist. The React app uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for species colors, and custom SVG components for ticks and marks. Users select X and Y attributes from dropdowns, while hovering over the interactive color legend dims non-matching points via React state, highlighting each species’ distribution.

AI-generated description

A scatterplot of the Iris Data Set loaded as a .csv from GitHub Gist

MIT Licensed

Similar vizzes

Loading thumbnail…

Improved Scatterplot with Color Legend

This interactive scatterplot displays the Iris dataset, with dropdown menus to select which numerical attribute maps to the x and y axes and a color legend distinguishing species. Built with React and D3 v5, it renders axes, tick marks, and circular marks as SVG elements. Color encoding uses a d3 ordinal scale, while numeric axes are scaled with d3’s linear scale and nice ticks.

KKai Stewart
91% match
Loading thumbnail…

Scatter plot with interactive color legend

This interactive scatter plot displays the Iris dataset, letting users explore relationships between sepal and petal measurements through dropdown menus for the x and y axes. The visualization uses React with D3 scales and SVG rendering, featuring an interactive color legend where hovering over a species name highlights those data points while fading the rest. The legend and marks respond to hover state, with the dataset loaded via d3.csv from a GitHub gist.

SShuyu Zheng
89% match
Loading thumbnail…

Scatter Plot with Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width along the axes and encoding species with color. Hovering over a legend item highlights the corresponding species’ points while dimming others. Built with React and D3 v5, it uses `scaleOrdinal` for color, `scaleLinear` for positions, and custom React components for axes, marks, and the interactive legend. Data is loaded as CSV and rendered as SVG circles with tooltips.

NNelson M
89% match
Loading thumbnail…

Interactive Color Legend

This interactive scatterplot visualizes the Iris flower dataset, allowing users to select which numeric attributes map to the x and y axes via React dropdown menus. A color legend for species acts as a filter: hovering over a legend item fades non-matching points and highlights those of the selected species. The visualization uses React state for UI interactions, D3 scales and axes for rendering the SVG marks (d3.scaleLinear, d3.scaleOrdinal), and the d3.csv utility for loading data.

CChristian Potdevin
88% match
Loading thumbnail…

Scatter plot with interactive color legend

This interactive scatter plot visualizes the Iris dataset, showing relationships between flower measurements selected via dropdown menus. A color legend on the right highlights points by species, dimming all other data when a species is hovered. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and renders SVG circles with tooltips. The dataset is loaded as CSV and parsed into numeric values for plotting.

AAlex Stulov
88% match
Loading thumbnail…

Interactive Color Legend

An interactive scatterplot of the Iris flower dataset, where users can select which attributes to plot on the X and Y axes via React dropdowns. Hovering over the color legend highlights points of a specific species, dimming all others. The visualization uses React with D3 v5 for scales and SVG rendering, with axes and marks built from reusable components. Data is loaded via `d3.csv` from a remote gist.

Ccynichole
88% 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
88% match
Loading thumbnail…

Interactive Color Legend

This interactive scatterplot displays the Iris flower dataset, mapping sepal length and width for three species. Hovering over the color legend highlights points of that species while fading the others. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, `extent`, and `csv` to load and scale data, while custom React components for axes, marks, and legend handle interactive filtering through state.

Ffjvoris
88% match