Skip to main content
SimilarExport ZIP
100%

React Scatter Plot w/ Color Legend

✓ Published1🌍 Public
AAnthony Ynami
Last edited Feb 22, 2021
Created on Feb 22, 2021

This example presents a scatter plot of the Iris dataset, mapping sepal length and width and coloring each point by species, with a color legend displayed to the right. The plot is rendered as an SVG using React components that leverage d3-scale for linear and ordinal scales, while axes are generated with d3’s tick methods and formatting via d3-format, with data loaded using d3.csv.

AI-generated description

A Scatter Plot of the Iris Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

React Scatter Plot w/ Colors

A React scatter plot visualizes the Iris dataset, showing sepal length against sepal width. Each of the three species receives a distinct color via D3's `scaleOrdinal`. The visualization uses D3's `scaleLinear` and `extent` for axes, with custom React components generating SVG ticks and circles. Hovering reveals formatted values via native SVG `<title>` tooltips. Data loads asynchronously from a CSV URL using a custom `useData` hook.

AAnthony Ynami
95% match
Loading thumbnail…

Scatterplot with Color Legend

This scatterplot visualizes the Iris flower dataset, plotting sepal length against sepal width with points colored by species. A color legend maps species names to distinct hues, while axis labels and tick marks provide scale context. Built with React and D3 v7, the example uses `scaleLinear` for positioning, `scaleOrdinal` for categorical colors, and custom reusable components like `AxisBottom`, `AxisLeft`, and `ColorLegend` to render SVG elements. Data is loaded asynchronously via `csv` from a remote URL.

Aafcchilders
93% match
Loading thumbnail…

Scatter Plot With Color Legend

This scatter plot uses the Iris Dataset to visualize sepal length against sepal width, with points colored by species according to a color legend. Built with React and rendered as an SVG, the visualization employs D3 scales for positioning, including a linear scale for the axes and an ordinal scale for categorical color mapping. Interactive tooltips display formatted values for each data point.

Rrstrauss127
93% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width, with points colored by species and a legend identifying the three categories. Using React with D3 v5, the visualization employs `scaleLinear` for the axes, `scaleOrdinal` for the color mapping, and renders SVG elements through reusable components like `AxisBottom`, `AxisLeft`, `ColorLegend`, and `Marks`. The data is loaded asynchronously via `csv`, with numeric columns parsed for plotting.

Wwinniepooh520
93% match
Loading thumbnail…

Scatter Plot with Color Legend

This visualization displays the classic Iris dataset as an SVG scatter plot, mapping petal length against sepal width and coloring each point by species. A color legend appears on the right, identifying the three iris species with distinct hues. Built with React and D3 v5, the code uses `scaleLinear` for both axes, `scaleOrdinal` for color mapping, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`, `ColorLegend`) to render ticks, circles, and legend items. Data loads asynchronously via D3's `csv` parser, which also converts numeric fields.

AAdriana Rodriguez Sanabria
93% match
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot of the Iris dataset uses React and D3 v6 to visualize sepal length and width, colored by species. Hovering over a color legend entry highlights matching data points while fading others to 20% opacity, using React state to track the hovered value. The visualization employs d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for loading data from a gist. SVG rendering creates the plot, axes, and an interactive color legend that filters marks dynamically.

AAnthony Ynami
93% match
Loading thumbnail…

Fork of Scatter Plot With Color Legend

This example visualizes the Iris dataset, plotting sepal length against sepal width for individual flowers. Each point is colored by species, with a color legend to the right identifying the three categories. Built with React and D3 v7, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color mapping, and renders as SVG. Custom React components handle axis ticks and legend marks, with tooltips providing formatted sepal length values on hover.

SSong Tao Chen
93% match
Loading thumbnail…

Scatter_Plot_with_Color_Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for three iris species, with each point colored by species and accompanied by a categorical color legend. The React-based visualization uses d3.scaleLinear for both axes, d3.scaleOrdinal for color mapping, and renders as SVG. The code imports axis components, color legend, and marks, while loading data asynchronously via d3.csv. Interactive tooltips appear on hover through SVG title elements, formatted using d3.format.

Mmartin
93% match