Skip to main content
SimilarExport ZIP
100%

Ep. 34 | Scatter Plot with Color Legend

✓ Published1🌍 Public
YYee Han
Last edited Dec 30, 2020
Created on Dec 30, 2020

This scatter plot visualizes the classic Iris dataset, plotting petal length against sepal width for three iris species. Each flower is represented by a colored circle, with species differentiated through an ordinal color scale and a dedicated legend. The visualization is built with React and D3 v6, using `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG circles for marks. The data is loaded asynchronously via `csv` from a GitHub gist, with axis components and a color legend created as reusable React components.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three species of iris. The species are encoded by color using a categorical scale mapped to an ordinal color legend. Built with React and D3 v5, the visualization uses `scaleLinear` for the axes, `scaleOrdinal` for colors, and reactive rendering via the `useData` hook to load CSV data. SVG circles represent each data point, with axes and legend components rendered separately.

Wwindwaver
94% match
Loading thumbnail…

Ep. 33 | Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three flower species. Each circle is colored via a D3 ordinal scale that maps species to a categorical color palette, with the species name accessible through a native SVG title tooltip. React components render the axes and marks, while d3.scaleLinear handles position scaling and d3.format formats the tick labels. The CSV data is loaded asynchronously using the d3.csv method within a React hook.

YYee Han
94% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris flower dataset, mapping petal length on the x-axis, sepal width on the y-axis, and encoding species with color. Each point is rendered as an SVG circle using React components, with scales from `d3.scaleLinear` and `d3.scaleOrdinal`. The visualization includes axes built via `xScale.ticks()`, a color legend generated with `colorScale.domain()`, and tooltips using SVG `<title>` elements. Data is loaded asynchronously with `d3.csv` from a public gist.

Aaakarsh satyam
94% match
Loading thumbnail…

Scatter Plot with Color Legend

This visualization displays the classic Iris dataset, plotting petal length against sepal width for three species of iris flowers. Each point is colored according to its species, with a color legend on the right side identifying the categories. The implementation uses React for component structure and state management, while D3 v7 utilities like `scaleLinear`, `scaleOrdinal`, and `csv` handle data loading, scaling, and coordinate mapping. The SVG rendering includes custom axis and legend components, with hover tooltips showing exact petal length values.

Jjbruzzo
94% match
Loading thumbnail…

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

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width, with points colored by species and a legend identifying the three categories. Using React with D3 v5, the visualization employs `scaleLinear` for the axes, `scaleOrdinal` for the color mapping, and renders SVG elements through reusable components like `AxisBottom`, `AxisLeft`, `ColorLegend`, and `Marks`. The data is loaded asynchronously via `csv`, with numeric columns parsed for plotting.

Wwinniepooh520
94% match
Loading thumbnail…

Scatter Plot with Color Legend

This visualization displays the classic Iris dataset as an SVG scatter plot, mapping petal length against sepal width and coloring each point by species. A color legend appears on the right, identifying the three iris species with distinct hues. Built with React and D3 v5, the code uses `scaleLinear` for both axes, `scaleOrdinal` for color mapping, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`, `ColorLegend`) to render ticks, circles, and legend items. Data loads asynchronously via D3's `csv` parser, which also converts numeric fields.

AAdriana Rodriguez Sanabria
94% match
Loading thumbnail…

Scatter Plot with color legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three flower species, distinguished by color. The visualization uses d3-scale’s `scaleLinear` for the axes and `scaleOrdinal` for the categorical color mapping, rendered via React components. The SVG rendering includes custom axes, a color legend, and tooltips via SVG `<title>` elements. Data is loaded asynchronously with `d3.csv` from a gist hosted on GitHub.

Ddumbdataguy@gmail.com
94% match