Scatter Plot with Color Legend

100%

Scatter Plot with Color Legend

✓ Published1🌍 Public

Last edited Aug 3, 2023

Created on Aug 3, 2023

This scatter plot visualizes the Iris Dataset, showing sepal length against sepal width for three iris species. Each point is color-coded by species using a d3.scaleOrdinal, with a custom legend displaying the color mapping. The visualization uses React with D3 scales and axes (d3.scaleLinear, d3.axisBottom, d3.axisLeft) rendered as SVG elements. Hovering reveals a tooltip via SVG `<title>` elements, and the data is loaded asynchronously with d3.csv.

AI-generated description

A scatter plot of the Iris Dataset

MIT Licensed

Similar vizzes

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

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

96% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, displaying sepal length against sepal width for three flower species. Each circle’s color encodes species membership, with a color legend positioned to the right identifying the categories. Built with React and D3 v7, the chart uses `scaleLinear` for axes, `scaleOrdinal` for color mapping, and custom SVG components for axes, marks, and legend. Data loads from a remote CSV via `d3.csv`, with hover tooltips providing exact values.

Ddaneslutzky

95% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length on the x-axis and sepal width on the y-axis, with each of the three iris species represented by a distinct color. The visualization uses D3.js scaling functions (`d3.scaleLinear`, `d3.scaleOrdinal`) within a React framework, rendering circles as SVG marks. A color legend provides species identification, with axes and labels formatted and styled through custom React components (`AxisBottom`, `AxisLeft`, `Marks`, `ColorLegend`).

Ssophburke

95% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three species of iris. The species are encoded by color using a categorical scale mapped to an ordinal color legend. Built with React and D3 v5, the visualization uses `scaleLinear` for the axes, `scaleOrdinal` for colors, and reactive rendering via the `useData` hook to load CSV data. SVG circles represent each data point, with axes and legend components rendered separately.

Wwindwaver

95% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing the relationship between petal length and sepal width for different iris species. Each data point is rendered as a circle using SVG, with color encoding species membership through a categorical color scale. The visualization includes axes, axis labels, and an interactive color legend that logs species names on hover. Built with React and D3 v5, it uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.csv for data loading.

Wwenleicao

95% match

Loading thumbnail…

Scatter Plot with Color Legend

A scatter plot of the Iris Dataset displays petal length (x-axis) against sepal width (y-axis), with each species represented by a distinct color and a custom legend of colored circles. Built with React and D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and SVG rendering with reusable React components for axes, marks, and the legend. Data is loaded asynchronously via `d3.csv` from the remote iris.csv file.

RRudy Shayganfar

95% 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. A color legend identifies each species, and hovering over a legend item highlights the corresponding points while fading others. The visualization uses React with D3 v5 for scales and SVG rendering, employing `scaleLinear` for axes, `scaleOrdinal` for colors, and custom React components for axes, marks, and the interactive legend.

EElliot Hill

95% match