Scatter Plot with colors

100%

Scatter Plot with colors

✓ Published1🌍 Public

Last edited Aug 3, 2023

Created on Aug 3, 2023

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.

AI-generated description

A scatter plot of the Iris Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot With Color

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.

SSong Tao Chen

95% match

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

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

94% match

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the classic Iris dataset, displaying petal length against sepal width with each of the three species represented by a distinct color. Using React and D3 v5, the visualization leverages d3.scaleLinear for both axes and d3.scaleOrdinal for the categorical color mapping. The SVG rendering includes custom axis components (AxisBottom, AxisLeft) and circle marks with native tooltips. Data is loaded asynchronously via d3.csv from a remote gist URL.

Ttrissentety

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

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

94% match

Loading thumbnail…

Scatterplot with Color

This scatterplot visualizes the Iris flower dataset, mapping sepal length and width across the x- and y-axes while encoding species with a categorical color scale. Each point is an SVG circle rendered through React components, with axes built using custom `AxisBottom` and `AxisLeft` components that leverage `d3.scaleLinear` for positioning. The code loads the CSV via `d3.csv`, applies numeric parsing, and uses `d3.scaleOrdinal` to assign distinct colors to each species. Hovering reveals tooltips formatted with `d3.format` to abbreviate large numbers.

Aafcchilders

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

94% match