Skip to main content
SimilarExport ZIP
100%

color Stylized Scatter Plot

✓ Published1🌍 Public
Mmikekslv
Last edited Mar 23, 2022
Created on Mar 22, 2022

This scatter plot displays the Iris dataset, mapping petal length and sepal width along the x and y axes, with species color-coded using a categorical scale. The visualization uses React with D3 v5, rendering as an SVG. It uses d3.scaleLinear for axes, d3.scaleOrdinal for the color legend, and d3.csv for data loading. The legend and axes are custom components, with circles sized at a constant radius.

AI-generated description

aerg

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Scatter Plot with colors

This visualization presents the classic Iris dataset as an interactive scatter plot, mapping petal length against sepal width for individual flower specimens. The React components construct an SVG chart using D3 scales, while a categorical color scale distinguishes the three iris species, accompanied by a color legend. The implementation leverages d3.csv for data loading, scaleLinear and scaleOrdinal for positioning and coloring, and custom React components for axes, marks, and legends.

JJulien Tremblay
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
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…

Stylized Scatter Plot with Colors

This interactive scatter plot visualizes the Iris Dataset, plotting petal length against sepal width with points colored by species using D3 scaleOrdinal. Built with React and rendered as SVG, it uses d3.csv to load data and d3.scaleLinear for axes. Circles include tooltips via SVG title elements, while axis labels and tick formatting use D3's format function.

YYenTingWu
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 dataset, displaying petal length against sepal width for different iris species. Each circle represents a flower, with color encoding its species via a categorical ordinal scale. The visualization is built using React and D3 v5, leveraging the `scaleLinear`, `scaleOrdinal`, and `extent` APIs to map data to SVG coordinates and colors. Axes are rendered as custom React components, with tick marks and labels styled through CSS. Data originates from the classic Iris dataset, loaded asynchronously via D3’s CSV parser, and tooltips show values on hover.

Llaplantalaplanta
94% match
Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris flower dataset, mapping petal length and sepal width for three species distinguished by color. The React application uses d3.scaleLinear for x and y axes, d3.scaleOrdinal for categorical color encoding, and d3.csv for data loading. SVG circles are rendered via custom React components for axes and marks, with d3.format applied to axis tick labels and native SVG titles providing tooltips.

BbeauMarko
94% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width with a color legend for species. The d3.v7 scales (scaleLinear, scaleOrdinal) position circles within an SVG rendered via React. Axis components handle tick generation, while d3.csv loads and parses the data. A color scale assigns distinct hues to the three iris species, with a legend generated from the color domain.

BBen Seebeck
94% match