Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Color Legend

✓ Published0🌍 Public
KKwame Porter Robinson
Last edited Dec 16, 2022
Created on Dec 16, 2022

This scatter plot visualizes the Iris Dataset, mapping petal length and sepal width for individual flowers, with color encoding species. Built with React and D3 v5, it uses `scaleLinear` for axes and `scaleOrdinal` for the categorical color scale. A custom `ColorLegend` supports interactive hover, which dims non-matching points and re-renders the highlighted subset. Axes are generated via reusable `AxisBottom` and `AxisLeft` components, while SVG circles serve as marks.

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
95% match
Loading thumbnail…

Fork of Scatter Plot with Color Legend

This fork of a scatter plot visualizes the Iris Dataset, showing sepal width against petal length for individual flowers, with species determining color. Built with React and D3 v5, the SVG visualization uses `scaleLinear` for the x and y axes, `scaleOrdinal` for the color scale, and a custom `ColorLegend` component. Data is loaded via D3’s `csv` function from a GitHub gist. The chart includes axis labels, formatted tick marks, and hover tooltips via SVG `<title>` elements.

RRoberto
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, mapping petal length and sepal width for individual flowers. Each circle is colored by species using a categorical scale, with a legend displaying the three species names. The React application uses d3’s `scaleLinear` for axes, `scaleOrdinal` for colors, and `csv` to load data. Axes, marks, and the legend are rendered as SVG components, and hovering shows a tooltip with the x-axis value.

Eevers-codeshop-ai
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, mapping petal length and sepal width for 150 flowers. A color legend encodes species, and hovering over a legend item highlights that species by reducing the opacity of all other points. The code uses React with SVG rendering, d3.scaleLinear for axes, d3.scaleOrdinal for colors, and custom React components for marks and legends.

SSam
95% 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
94% 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
94% match