Fork of Scatter Plot With Color Legend

100%

Fork of Scatter Plot With Color Legend

✓ Published1🌍 Public

Last edited Jan 10, 2022

Created on Jan 9, 2022

This example visualizes the Iris dataset, plotting sepal length against sepal width for individual flowers. Each point is colored by species, with a color legend to the right identifying the three categories. Built with React and D3 v7, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color mapping, and renders as SVG. Custom React components handle axis ticks and legend marks, with tooltips providing formatted sepal length values on hover.

AI-generated description

scatter plot of [The Iris dataset] https://gist.githubusercontent.com/curran/a08a1080b88344b0c8a7/raw/0e7a9b0a5d22642a06d3d5b9bcbad9890c8ee534/iris.csv 8:26:47

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This example visualizes the classic Iris dataset, plotting petal length against sepal width for three flower species. Each point is a colored circle, with a legend mapping species to colors, and axis labels clearly identifying the measurements. The visualization uses a React component structure with D3 scales, including `scaleLinear` for axes and `scaleOrdinal` for the color mapping, rendering SVG elements through React. Data is loaded asynchronously via the D3 `csv` utility, and the legend and axes are composed from modular React components.

VVishwanath Hegde

95% match

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This example visualizes the Iris dataset as an interactive scatter plot, with dropdown menus to select which sepal or petal measurements appear on the x and y axes. Points are color-coded by species using an ordinal scale, with a legend mapping each species to its corresponding color. The visualization is built as a React application that fetches data with d3.csv, uses d3.scaleLinear for positioning and d3.scaleOrdinal for color, and renders axes and marks as SVG elements via custom React components.

AAudrey

95% match

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length against sepal width, with points colored by species and accompanied by a color legend. Built with React and D3 v5, it uses d3.scaleLinear for the x and y axes and d3.scaleOrdinal for the categorical color encoding. The SVG rendering separates axis, legend, and mark components, with circle elements representing each flower. Data is loaded asynchronously via d3.csv from a GitHub gist, and tick formatting uses d3.format for compact notation.

Ffaqihisaninja

95% match

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width with each of the three species colored distinctly. The visualization uses React components to render SVG marks, with d3.scaleLinear for the x and y axes and d3.scaleOrdinal for the categorical color mapping. A color legend identifies species, and axes are generated from d3’s tick formatting. The data is loaded asynchronously using d3.csv, while the tooltip displays the petal length value on hover.

NNicolás Troncoso

95% match

Loading thumbnail…

Fork of Scatter Plot - Iris Flower - Color & Legend

This scatter plot visualizes the Iris flower dataset, showing sepal length against sepal width with each species distinguished by color. A legend on the right maps the three species to their respective hues, while axes display the quantitative measurements. Built with React and D3 v6, the visualization uses `scaleLinear` for both axes, `scaleOrdinal` for the color mapping, and renders SVG circles. The data is loaded asynchronously via `csv()` from a remote URL, with custom axis and legend components generated through D3 tick functions.

AAndres de la Garza

95% match

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width and coloring each point by species. The visualization includes axes, tick marks, a species color legend with circular swatches, and hover tooltips displaying formatted x-values. Built with React and D3 v5, it uses `scaleLinear` for positional encoding, `scaleOrdinal` for categorical colors, and `csv` for data loading. The SVG rendering includes custom axis components and circular marks, with the legend positioned to the right of the plot area.

DDanier

95% match

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width with points colored by species. A color legend on the right maps each species to a distinct color, while axis labels and tick marks provide context. Built with React and D3 v5, it uses `scaleLinear` for positioning, `scaleOrdinal` for colors, and custom SVG components for axes, marks, and legend. Data is loaded via `d3.csv` and rendered as SVG circles with hover tooltips.

Cchar0496

95% match

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris Dataset, showing petal length on the x-axis and sepal width on the y-axis, with points colored by species. Built with React and D3 v5, it uses d3.scaleLinear for both axes and d3.scaleOrdinal for the categorical color mapping. The SVG rendering includes custom axis components, a color legend, and tooltips via SVG title elements. The data is loaded through d3.csv from a GitHub Gist.

DDeborah Ong

95% match