Colors Legend

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

Color Legends

This scatterplot displays the Iris dataset, plotting petal length against sepal width. Each flower is represented by a circle colored according to species, with a categorical color legend indicating the mapping. The visualization uses d3.scaleLinear and d3.scaleOrdinal for positioning and coloring, rendered as SVG via React. Axes, tick formatting, and interactive tooltips are implemented using reusable React components that call d3 APIs like extent, format, and scale functions.

Llefat92

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

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

Interactive Color Legend

This example visualizes the Iris dataset as a scatter plot of petal length against sepal width, with points colored by species. An interactive color legend allows hovering over a species name to fade all other points and highlight only the selected species. The visualization is built with React and D3 v5, using d3.scaleLinear for axes, d3.scaleOrdinal for the color mapping, and SVG circles rendered through React components. Data is loaded asynchronously from a CSV file via d3.csv.

Yyeezhu112

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

Scatter Plot with Color Legend

This example visualizes the classic Iris Dataset, plotting petal length against sepal width to reveal species clusters. The visualization is built with React and D3 v5, rendering as an SVG. It uses `scaleLinear` for the x and y axes and `scaleOrdinal` with a custom color range to encode the three iris species. A color legend, composed of circles and text, displays the species categories. Tooltips are provided via SVG `<title>` elements, showing the numeric value of petal length for each data point.

DdaojunL

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