Improved Scatterplot with Color Legend

100%

Improved Scatterplot with Color Legend

✓ Published1🌍 Public

Last edited Nov 15, 2021

Created on Nov 15, 2021

Forked from Improved Scatterplot with Menus

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.

AI-generated description

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

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

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

92% match

Loading thumbnail…

Scatterplot with Color Legend Interactive

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.

MMark Lam

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

92% match

Loading thumbnail…

Scatter plot with Color Legend

This visualization displays the Iris dataset as a scatter plot, using color to distinguish between the three iris species. The user can select different measurement attributes for the X and Y axes from dropdown menus. A color legend allows hovering to highlight data points belonging to a specific species. Built with React and D3.js (v5), the visualization uses SVG rendering, `scaleLinear` and `scaleOrdinal` for scaling, and custom components for axes, marks, and the interactive legend.

FFloorNummer

92% match

Loading thumbnail…

Scatter plot with Colors Legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements along the x- and y-axes while using color to distinguish species. Users can select which attributes to plot from dropdown menus. The visualization uses React with D3’s `scaleLinear` for axes, `scaleOrdinal` for color encoding, and renders SVG circles with tooltips. A color legend maps species to distinct colors, with axis labels and tick marks generated by custom React components.

Kkragovic

92% match

Loading thumbnail…

Scatter Plot with Color Legend

A scatter plot of the Iris Dataset displays four numeric attributes on selectable X and Y axes, with points colored by species via an ordinal color scale and a legend. Using D3 v5 scales (scaleLinear, scaleOrdinal), the React application renders SVG axes, marks, and dropdown menus. Users select attributes from menus, and hover tooltips reveal values. The dataset is loaded from a CSV URL using D3's csv parser.

RRajat Dangat

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

92% match