Fork of Scatter Plot with Color Legend

100%

Fork of Scatter Plot with Color Legend

✓ Published0🌍 Public

Last edited Oct 31, 2021

Created on Oct 31, 2021

Forked from Scatter Plot with Color Legend

A scatter plot of the Iris dataset shows petal length against sepal width, with points colored by species. A color legend on the right is interactive: hovering over a species name fades out all other points and highlights only that species. The visualization is built with React and D3 v5, using `d3.scaleLinear` and `d3.scaleOrdinal` for scales, and SVG circles for marks. Data is loaded via `d3.csv` from a GitHub gist.

AI-generated description

A scatter plot of The Iris Dataset with color legend.

MIT Licensed

Similar vizzes

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

97% match

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This example visualizes the Iris dataset as a scatter plot of petal length against sepal width, with points colored by iris species. It uses a color legend to map species to categorical colors. Built with React and D3 v5, the SVG rendering uses D3’s `scaleLinear`, `scaleOrdinal`, and `extent` APIs to compute scales, while axes and legend ticks are generated via custom React components. The data is loaded asynchronously from a CSV URL using D3’s `csv` function, with tooltips showing the petal length formatted via `format`.

AAnkit-Ian-53787

96% match

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, showing petal length against sepal width with points colored by species. The SVG is rendered using React components, with axes and scales built via d3.scaleLinear and d3.scaleOrdinal. A color legend identifies the three species, and hovering over a circle displays a tooltip with the petal length value. The data is loaded asynchronously using d3.csv from a remote source.

Aankolaver

96% match

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This scatter plot of the Iris Dataset maps petal length on the x-axis and sepal width on the y-axis, with each point colored by species via d3.scaleOrdinal. A color legend lists the three species using the same color scale, and axes are rendered as SVG ticks with formatted labels. The visualization is built with React components and d3’s scaleLinear for positioning, with the data loaded asynchronously via d3.csv.

AAnnie Ulichney

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

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

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

96% match

Loading thumbnail…

Fork of Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, encoding petal length on the x-axis, sepal width on the y-axis, and species as color. It uses React and d3.scaleLinear for axes, d3.scaleOrdinal for the categorical color scale, and SVG circles for marks. Hovering over a species in the color legend highlights the corresponding points while dimming others, implemented through React state and opacity transitions. The chart is rendered with SVG and includes axis labels, a color legend, and tooltips.

Ccshm407

95% match