Skip to main content
SimilarExport ZIP
100%

Scatter plot and color legend

✓ Published0🌍 Public
EElliot Hill
Last edited Jul 15, 2021
Created on Jul 13, 2021

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.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot with color legend

This interactive scatter plot of the Iris dataset lets users explore relationships between four flower measurements by selecting which attributes appear on the x- and y-axes via two dropdown menus. Points are colored by species using a color legend built with React components. The visualization uses d3.scaleLinear for positioning, d3.scaleOrdinal for color mapping, and renders axes and marks as SVG elements within a React framework, with data loaded asynchronously via d3.csv.

AAndrea Picciau
96% match
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…

Scatter plot with color legend

An interactive scatter plot of the Iris Dataset allows users to select which flower measurements to display on the x and y axes via dropdowns. The plot uses D3.js v7 scale functions to map data to SVG coordinates and a color legend to distinguish three iris species. The React code renders the plot declaratively, with custom components for axes, marks, and the legend, using D3’s data loading from a CSV URL.

AAlex Stulov
95% 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
95% match
Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between different measurements (sepal length, sepal width, petal length, petal width) by selecting attributes for the x and y axes via React dropdown menus. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color encoding of species, and renders circles as SVG marks. React state management tracks the selected attributes, while d3.csv loads the data and d3.format formats axis tick labels, with a color legend indicating species.

CChristian Potdevin
95% 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
94% match
Loading thumbnail…

Scatter plot with color legends

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two flower measurements via dropdown menus while color-encoding points by species. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for the categorical color scale, and renders SVG circles through React components. The chart includes a custom color legend and axis components, with data loaded asynchronously from a CSV using D3's `csv` parser.

Zzyniax
94% 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