100%

Scatterplot with Color Legend Interactive

✓ Published0🌍 Public

Last edited Aug 11, 2021

Created on Aug 6, 2021

Forked from Scatterplot with Color Legend

This interactive scatterplot displays the Iris flower dataset, allowing the user to select which attributes are mapped to the x- and y-axes via two dropdown menus. A color legend on the right encodes the flower species, and hovering over a legend entry dims points from other species while highlighting the matching ones. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and custom React components for axes and marks, rendering to SVG from parsed CSV data.

AI-generated description

Axes with 3D

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot with Color Legend II

This interactive scatterplot visualizes the Iris flower dataset, allowing users to select which numeric attributes to plot on the x- and y-axes via dropdown menus. It renders circles colored by species using an ordinal color scale, with a legend in the top-right, and includes an SVG title tooltip on each point. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and `csv` to load data, with reusable components for axes, marks, and the legend.

Nnexus1058

95% match

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot of the Iris dataset allows users to dynamically select which flower attributes to plot on the x and y axes via React dropdown menus. Colored by species, the plot displays circles with a supplementary legend and axis labels. Built with React, the visualization leverages D3 v5 for scales, axes, and CSV data loading, rendering to SVG. Users can explore relationships between sepal and petal measurements across three iris species.

MMario Ibarra

95% match

Loading thumbnail…

Scatter plot and color legend

This interactive scatter plot of the Iris flower dataset allows users to select which numeric attributes to plot on the x- and y-axes via React dropdown menus. Points are colored by species using a d3.scaleOrdinal with a custom color legend built from SVG circles. The visualization uses React components for axes, marks, and legend, with D3’s scaleLinear and extent for scaling. Data is loaded asynchronously from a CSV file using d3.csv.

EElliot Hill

95% match

Loading thumbnail…

Scatter Plot with Color Legend[interactive]

A scatter plot of the Iris dataset with interactive dropdown menus to select the X and Y attributes. Color encodes the species of each flower, with a color legend that allows hovering to highlight a single species and fade the others. The visualization is built with React components and D3 scales, rendering marks as SVG circles. Axis labels update dynamically based on the selected attributes.

Aadewole-top

95% 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

95% 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

94% match

Loading thumbnail…

Scatterplot with Color Legend

This interactive scatterplot visualizes the Iris flower dataset, letting users explore relationships between sepal and petal measurements via dropdown menus that select the x and y axes. The chart displays points colored by species through a D3 scaleOrdinal color legend. Built with React and D3 v5, it renders as SVG using d3.scaleLinear for axes, d3.extent for domains, and custom React components for axes, marks, and the color legend.

MMark Lam

94% match

Loading thumbnail…

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

94% match