Skip to main content
SimilarExport ZIP
100%

Color Legend

✓ Published0🌍 Public
Nnagarjuna1968
Last edited Mar 6, 2022
Created on Mar 6, 2022

This example visualizes the Iris Dataset, showing clustered circles that represent individual iris flowers based on their sepal and petal lengths. The data is loaded via `d3.csv` and rendered as an SVG scatter plot using `d3.scaleLinear` for axes and `d3.scaleOrdinal` with `d3.schemeCategory10` for color mapping by species. A categorical color legend is added with `d3.legendColor`, and axis styling includes custom tick lines and labels.

AI-generated description

A scatter plot with D3. 2017 style.

This visualization shows The Iris Dataset. It's designed to emphasize clustering by Petal Length and Sepal Length by Species.

Each circle represents an iris flower.

Ported from Bl.ocks.org: Stylized Scatter Plot with Color Legend.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal length for individual flowers. Each circle represents one iris, colored by its species to reveal clustering patterns. The D3.js code uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color mapping. Axis labels and a color legend are rendered using SVG elements and the d3-legend library’s `legendColor` component.

Nnithish-1999
92% match
Loading thumbnail…

Stylized Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, displaying clusters of iris flowers by petal length against sepal length, with color distinguishing species. Each circle represents a flower, and a color legend identifies the three species. Built with D3 v5, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and `d3.axisBottom`/`d3.axisLeft` for ticks. The `d3.legendColor` plugin renders the circular legend, while CSV data is loaded via `d3.csv` and rendered as SVG circles with opacity.

CCurran Kelleher
92% 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
90% 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
90% match
Loading thumbnail…

Color legend

This scatter plot of the Iris dataset maps sepal length and width, with points colored by species. A color legend on the right side filters the visualization, dimming non-matching species and highlighting the selected one on hover. The example uses React with d3.scaleOrdinal for color mapping, d3.scaleLinear for axes, and SVG circles rendered via ReactDOM. Data is loaded from a CSV using d3.csv.

DDaniel Zsido
90% match
Loading thumbnail…

Color Legend

This interactive scatterplot lets users explore the Iris dataset by selecting which measurement to map to the x-axis (e.g., petal length, sepal width). Data points are rendered as circles using React and SVG, with their position derived from `d3.scaleLinear` for x and y values, and their color assigned via `d3.scaleOrdinal` based on species. A color legend, built from the same ordinal scale, displays each species’ color and name, while a dropdown menu updates the x-axis attribute using React state. The chart loads the data asynchronously using D3's `csv` function.

AAnimesh Nautiyal
90% 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
90% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length with points colored by species. A circular color legend identifies the three species categories. The visualization uses D3 v5 with the `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and the `d3.legendColor` library for the legend. Grid lines extend across the chart via tick size settings, and axis labels are rotated for the y-axis. The data is loaded from a CSV file via `d3.csv`.

Aakhil kata
90% match