Stylized Scatter Plot

100%

Stylized Scatter Plot

✓ Published1🌍 Public

Last edited Oct 18, 2022

Created on Oct 18, 2022

This stylized scatter plot visualizes the Iris Data Set, plotting petal length against petal width for individual flowers. The SVG rendering uses React components to structure axes and marks, while d3-scale’s `scaleLinear` maps data values to pixel coordinates. The axis labels and tick marks are generated with custom React components, and d3’s `csv` loader parses the dataset. Each point is a circle with a native SVG `<title>` element for tooltip display, styled with a teal fill and Poppins font for a clean, modern aesthetic.

AI-generated description

A scatter plot of [The Iris Data Set] (https://gist.githubusercontent.com/curran/a08a1080b88344b0c8a7/raw/0e7a9b0a5d22642a06d3d5b9bcbad9890c8ee534/iris.csv)

MIT Licensed

Similar vizzes

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

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

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

96% match

Loading thumbnail…

Stylized Scatterplot

This stylized scatterplot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. The visualization uses D3.js v7 scales and axes within a React component, rendering marks as SVG circles with a teal fill. Data is loaded asynchronously via D3’s `csv` parser, with numeric conversion applied to all measurements. The axes employ custom tick components, and tooltips are provided through SVG `<title>` elements, formatted using D3’s `format` function. The visual style features a clean design with Poppins typography and subtle grid lines.

Rrmgoldberg24

96% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization uses React and D3 v5 to render SVG circles with tooltips showing petal length values. Linear scales map the data domain to plotting positions, while custom axis components generate gridlines and tick labels. The design incorporates a clean aesthetic using the Poppins font, teal markers, and styled axis text, with axis labels rotated for the y-axis.

Wwinniepooh520

96% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris flower dataset, mapping petal length against sepal width for individual specimens. The visualization uses D3.js utilities—including `csv` for data loading, `scaleLinear` for axes, and `extent` for domain calculation—combined with React to render SVG circles and axis ticks. Each data point is drawn as a small teal circle with a tooltip displaying its value. The chart includes labeled axes with customized tick formatting and a responsive layout, all styled with the Poppins font family.

FFonda Irena Santoso

96% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual iris flowers. The visualization employs D3.js scaleLinear functions to map the data domain to SVG coordinates, with React components rendering the axes and circle marks. Custom tooltips display formatted values via the D3 format API. The plot features a clean, minimalist design with Poppins typography, muted gray tick marks, and teal data points, showcasing how aesthetic styling can enhance a classic statistical chart.

Wwindwaver

96% match

Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot visualizes the Iris dataset, mapping petal length against sepal width to reveal the distribution of flower measurements. The code builds custom SVG axes using React components and D3’s scaleLinear, format, and extent utilities. Circles representing individual flowers are rendered with SVG elements, and hover tooltips display formatted values. The styling uses the Poppins font with turquoise marks and muted gray axes.

CCurran Kelleher

96% match