Scatterplot_Colorlegend

100%

Scatterplot_Colorlegend

✓ Published0🌍 Public

Last edited Jan 2, 2021

Created on Jan 2, 2021

This scatterplot visualizes the Iris dataset, plotting petal length against sepal width, with points colored by species. The React-based visualization uses d3.scaleLinear for the x and y axes and d3.scaleOrdinal for the color mapping. A hovering interaction on the color legend highlights one species by fading the other points using opacity, while rendering the selected group with the d3.csv-loaded data. Axes and SVG marks are generated with React components using d3.ticks for tick marks.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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, mapping petal length and sepal width to the x and y axes. Each point is colored by species using a categorical scale with a legend positioned to the right. The visualization is built with React and rendered as SVG, using D3 scales such as `scaleLinear` and `scaleOrdinal` for positioning and coloring. Axes are drawn with custom React components, and a `title` element provides native tooltips for each circle.

WWolfgang

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

95% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal length and sepal width on the x and y axes, with each point colored by species. A color legend identifies the three species categories. Built with React and D3 v5, the visualization uses d3.scaleLinear for coordinate mapping and d3.scaleOrdinal for species colors, rendering SVG circles via React components. Data is loaded asynchronously using d3.csv from a GitHub gist, with axes and labels generated through custom React components.

DDanier

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

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, plotting petal length against sepal width with each point colored by species. The visualization uses D3 v6's scaleLinear and scaleOrdinal to map quantitative and categorical data, while React components render SVG axes, circles, and a color legend. The color legend displays distinct species categories, and hovering over points reveals their petal length values. Data is loaded via d3.csv from a remote URL, and the entire chart adapts to the browser window size.

BbeauMarko

95% 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. Built with React and D3 v5, the visualization uses `scaleLinear` to map data coordinates to SVG positions and `scaleOrdinal` to assign species colors. The SVG rendering includes custom axes, a color legend, and circle marks that display tooltips with formatted values on hover.

KKolezhannochka

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