Making a Color Legend

100%

Making a Color Legend

✓ Published1🌍 Public

Last edited Oct 10, 2021

Created on Oct 10, 2021

A scatter plot of the Iris Dataset displays petal length against sepal width, with each point colored by species. A separate color legend identifies the three species using colored circles. Built with React and D3 v5, the visualization uses `scaleOrdinal` for the color mapping and `scaleLinear` for the axes. The SVG output includes custom axis components and a `ColorLegend` component that generates the legend ticks from the color scale's domain.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Color Legend

This scatterplot of the Iris dataset visualizes petal length against sepal width, with points colored by species using an ordinal color scale. An interactive color legend maps species names to colors using circles and text within an SVG canvas. Built with React and D3 (v5), the visualization uses d3.scaleOrdinal for color mapping, d3.scaleLinear for axes, and custom React components for rendering axes, marks, and the legend.

NNikhil Reddy Manda

96% match

Loading thumbnail…

Making A Color Legend

This interactive scatter plot visualizes the classic Iris dataset, mapping petal length against sepal width. Each point is colored by species using a `d3.scaleOrdinal` color scale, with a custom color legend built from React components that displays the species names alongside colored circles. The visualization uses `d3.scaleLinear` for both axes, includes formatted tick labels, and incorporates tooltips via SVG `<title>` elements. Rendering is done through React and D3 v5, with data loaded asynchronously from a CSV file.

MMichael Bergerson

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

94% match

Loading thumbnail…

Making a Colour Legend

This example displays the Iris dataset as a scatter plot of petal length against sepal width, with points colored by species. A custom color legend built from the ordinal color scale sits to the right of the plot. The visualization uses React to render SVG elements, with D3 v6 scales and axes. The iris data is loaded from a CSV URL using `d3.csv`, and the legend maps each species name to a colored circle using `scaleOrdinal`.

HHollyClarke19

94% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. A color legend identifies the three species, with each point colored according to its species category. The visualization is built with React and D3 v5, using scaleLinear for the axes, scaleOrdinal for color encoding, and SVG circles for marks. The code includes custom AxisBottom, AxisLeft, and ColorLegend components, with hover tooltips provided by native SVG title elements.

Zzyniax

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

94% match

Loading thumbnail…

Scatter Plot with Color Legend

A scatter plot of the Iris Dataset displays petal length against sepal width, with points colored by species and a legend indicating the three categories. The visualization uses React to render SVG elements, with D3 v5 scales (scaleLinear, scaleOrdinal) handling positions and colors, and D3's csv loader fetching the data. Custom React components define the axes, marks, and color legend, while D3’s format function applies tick label formatting.

MMilena Belianovich Holtman

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

94% match