Scatter Plot With Color

100%

Scatter Plot With Color

✓ Published1🌍 Public

Last edited Jan 7, 2022

Created on Jan 7, 2022

This scatter plot visualizes the Iris dataset, displaying sepal length against sepal width, with each of the three iris species distinguished by a unique color from a d3.scaleOrdinal range. Built with React and rendered as SVG, the chart uses d3.scaleLinear for both axes and d3.format for tick labels. Data is loaded asynchronously via d3.csv. A native SVG `<title>` element provides simple tooltips on each circle.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot with Color

This scatterplot displays the Iris dataset, plotting sepal length on the x-axis and sepal width on the y-axis, with each species assigned a distinct color. The visualization uses D3’s `scaleLinear` for positioning, `scaleOrdinal` for color mapping, and React to render SVG circles and axis components. The data is loaded asynchronously via `d3.csv` and parsed into numeric fields. Hovering over a point reveals its sepal length through a native SVG `<title>` tooltip.

Ffjvoris

96% match

Loading thumbnail…

Scatter Plot with color

A React-based scatter plot visualizes the Iris dataset, plotting sepal length against sepal width. Each point is colored by species using a d3.scaleOrdinal color scale with three categorical colors. The visualization uses React components to render SVG circles for marks and custom axis components built with d3.scaleLinear scales. Hovering over a circle reveals a tooltip with the sepal length value, implemented via a native SVG title element.

Ddaneslutzky

96% match

Loading thumbnail…

Scatter Plot with Colors

This scatter plot visualizes the Iris dataset, plotting sepal length against sepal width, with each point colored by species. A color legend allows users to hover over a species to highlight corresponding data points and fade the others, aiding comparison across groups. Built with React and rendered as an SVG, the visualization uses D3 v7 APIs like `d3.csv` for data loading, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` for the categorical color mapping.

GGabriel

95% match

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width with each of the three iris species colored distinctly. The visualization uses React with D3 v5, employing d3.scaleLinear for both axes and d3.scaleOrdinal for color mapping. Data is loaded via d3.csv from a GitHub gist, and axes are rendered as custom React components. SVG circles represent individual flowers, with native `<title>` elements providing tooltips on hover.

MMilena Belianovich Holtman

95% match

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for three iris species. Each circle is colored by species using a d3.scaleOrdinal color scale with distinct hues. The visualization is built with React and D3 v5, using d3.scaleLinear for axes and SVG for rendering. Hovering reveals tooltips via native SVG `<title>` elements.

Ssophburke

95% match

Loading thumbnail…

Scatter Plot with Color

A scatter plot of the Iris dataset displays petal length against sepal width, with each species represented by a distinct color from an ordinal scale. Built with React and D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color encoding, and SVG circles with tooltips. Data is loaded asynchronously via `d3.csv` from a remote URL, with axes rendered using custom React components that map tick values through `d3.format`.

Wwindwaver

95% match

Loading thumbnail…

Scatter Plot with colors

This scatter plot displays the Iris dataset, showing sepal length on the x-axis and sepal width on the y-axis, with each species (Setosa, Versicolor, and Virginica) represented by a distinct color. The visualization uses d3.scaleLinear for both axes and d3.scaleOrdinal to map variety categories to a categorical color palette. React manages the component state and rendering, while d3.csv loads the remote dataset and d3.extent determines the axis domains. SVG circles are drawn with tooltips that display formatted x-values when hovered.

GGayan Priyadarshana

95% match

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width with points colored by species. The visualization uses React to render SVG elements, with d3.scaleLinear for positioning and d3.scaleOrdinal for categorical color mapping. Custom React components for axes and marks handle the rendering, while d3.csv loads and parses the dataset. A d3.format function formats tick labels, and the color scheme distinguishes the three iris species.

BBen Brophy

95% match