Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Color Legend

✓ Published1🌍 Public
PPhronesis
Last edited Nov 22, 2021
Created on Nov 22, 2021

A React-driven scatter plot visualizes the iris dataset, displaying four numeric attributes as selectable X and Y axes via dropdown menus. Each circle represents a flower, colored by species through a legend using `scaleOrdinal`. The SVG rendering uses `d3.scaleLinear` and `d3.extent` for axes, with React state managing the attribute selection. The code imports `csv` from D3 v5, uses React hooks like `useState` and `useEffect`, and custom components like `AxisBottom`, `AxisLeft`, `Marks`, and `ColorLegend` structure the visualization. A tooltip reveals exact values on hover.

AI-generated description

A stylized scatter plot of the famous iris data set, using React to create menus and interactivity.

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
94% 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
93% 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
93% 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
93% match
Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the relationships between four measurements of iris flowers, using color to distinguish species. Built with React and D3, it features dropdown menus that allow users to switch the variables plotted on the x and y axes, and a color legend that maps species to distinct hues. The plot is rendered as an SVG, with axes and ticks generated by the `AxisBottom` and `AxisLeft` components, and circles positioned using `scaleLinear` while colors come from `scaleOrdinal`. Data is loaded from a CSV file via `useData`.

SSerind Joshua McCue
93% match
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
93% match
Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between four measurements (sepal and petal length/width) through dropdown menus that control the x and y axes. Points are colored by species using a d3.scaleOrdinal with a corresponding legend showing the three Iris varieties. The visualization is built with React and D3 v6, rendering SVG circles and axes through custom components like AxisBottom, AxisLeft, and Marks, with data loaded via d3.csv from a remote gist.

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