Making a Colour Legend

100%

Making a Colour Legend

✓ Published1🌍 Public

Last edited Apr 11, 2021

Created on Apr 11, 2021

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`.

AI-generated description

A scatter plot showing the Iris dataset and the relationship between Petal Length and Sepal Width (adaptable to any variable) using D3 and React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Color Legend

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.

CChira Cezara Victoria

94% match

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

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

93% match

Loading thumbnail…

Color Legend Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. A categorical color legend distinguishes the three iris species via a d3.scaleOrdinal color scale with custom ranges. The visualization uses React components to render SVG elements, with d3.scaleLinear for both axes and separate AxisBottom, AxisLeft, Marks, and ColorLegend components. Data is loaded asynchronously using d3.csv from a remote Gist URL.

TTsaiJie

92% match

Loading thumbnail…

Interactive Colour Legend

This example shows an interactive scatter plot of the Iris dataset, encoding petal length and sepal width along the x- and y-axes, with species mapped to color. The ordinal color legend uses `d3.scaleOrdinal` with SVG circles; hovering over a legend item highlights only the corresponding species by filtering the data with React state. Non-hovered marks fade via opacity, and the axis components use `d3.scaleLinear` and `extent` to derive domains. The data loads asynchronously through `d3.csv`.

HHollyClarke19

92% match

Loading thumbnail…

Color Legend

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width. A color legend categorizes the three iris species, and hovering over a legend item highlights the corresponding points while fading the rest. The visualization uses React with ReactDOM, D3 v5’s `scaleLinear`, `scaleOrdinal`, and `extent` for scales, and renders SVG circles with tooltips. Data is loaded asynchronously via `csv`, and interactivity is managed through React state hooks.

AAnthony Zornig

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

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

92% match