Stylized Scatter Plot II

100%

Stylized Scatter Plot II

✓ Published2🌍 Public

Last edited Apr 22, 2021

Created on Apr 22, 2021

This stylized scatter plot visualizes the classic Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis with purple axis lines and lime-green circular marks. Built with React and D3 v5, it uses d3.scaleLinear and d3.extent to compute scales, while d3.csv loads the data remotely. The SVG rendering includes custom axis components, a rotated y-axis label, formatted tick values via d3.format, and a title tooltip on each circle.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, showing petal length against sepal width as teal circles. Built with React and D3 v5, it renders as an SVG with custom, reusable components for axes and marks. The visualization uses D3's `scaleLinear` for scaling, `extent` and `max` for domain calculations, and `format` for tick labels. The code draws axis ticks and labels with styled lines and text, and each data point is a circle with a tooltip, pulling data from a CSV URL.

Sstefichim

96% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis. The React-based implementation uses d3.scaleLinear for both axes and renders circles as SVG marks with native tooltips. Styling applies a Montserrat font, light gray grid lines from custom axis components, and blue circles with a fixed radius. Data is loaded asynchronously via d3.csv and parsed into numeric fields before scaling.

Ccoltonjcox92

95% match

Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot of the Iris Dataset displays petal length on the x-axis and sepal width on the y-axis, encoding each flower as a fixed-size circle. Built with React and D3 v5, it uses `csv` for data loading, `scaleLinear` for axes, and SVG `circle` elements for marks. The rendering includes custom axis components that draw lines and text ticks, along with CSS-styled fonts and colors for a polished appearance.

SStarkerRegen

95% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, showing petal length against sepal width for individual flower specimens. The visualization uses React with D3 v5 scales and SVG rendering, featuring custom AxisBottom and AxisLeft components that generate tick marks and labels. Circles representing data points include native SVG title tooltips, while the Poppins font and teal color scheme create a distinctive aesthetic. The code leverages d3.scaleLinear, d3.extent, d3.format, and d3.csv for data loading and scaling operations.

AAbhay Kumar

95% match

Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis. Each circle represents an individual iris flower, with hover tooltips revealing the precise petal length value. Built with React and rendered as SVG, the visualization uses d3.scaleLinear and d3.extent to compute scales from the CSV data loaded via d3.csv. Custom React components handle axes and marks, with styling applied through CSS classes for ticks, labels, and the teal-colored data points.

Jjwlam83

95% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length against sepal width. Each circle represents a flower specimen, with a fixed radius and teal fill. The chart uses React components to render SVG axes and marks, while D3’s scaleLinear and extent functions compute the scales from the CSV data. Axis labels and tick formatting are customized, and tooltips display values via SVG title elements.

Ddiska432

95% match

Loading thumbnail…

Stylized Scatterplot

This stylized scatterplot visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. The SVG rendering uses React components with D3 scales (d3.scaleLinear) and axes (AxisBottom and AxisLeft) built from D3 tick marks. The d3.csv function loads the data, while circle marks include native SVG tooltips via the title element. The chart uses a Poppins font, teal circles, and italic axis labels with abbreviated tick formatting via d3.format.

KK3zter

95% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual flower samples. It uses d3.scaleLinear for axis scaling and React to generate the SVG. The marks are rendered as circles with tooltips, styled through CSS with a Poppins font. The code builds custom axes using React components, with the x-axis formatting numbers with a suffix format.

Ttoeric

95% match