Skip to main content
SimilarExport ZIP
100%

Stylized Scatter Plot

✓ Published0🌍 Public
SSnapika
Last edited Mar 6, 2022
Created on Mar 6, 2022

This stylized scatter plot visualizes the Iris flower dataset, mapping petal length on the x-axis against sepal width on the y-axis. Built with React and D3 v5, it renders as an SVG using `d3.scaleLinear` for axes and `Marks` component to draw each data point as a circle. The chart's distinctive aesthetic comes from oversized axis labels, chunky tick marks, and a bold Poppins font, giving the familiar scatter plot a modern, graphic-design feel.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

MIT Licensed

Similar vizzes

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

A scatter plot of the Iris Dataset shows petal length on the x-axis and sepal width on the y-axis. Built with React and D3 v5, it uses `scaleLinear` for axes and renders SVG circles via a custom `Marks` component. Data is loaded asynchronously from a CSV using D3’s `csv` function. Axis ticks and labels are styled with the Poppins font, and each point includes a tooltip formatted with D3’s `format` function.

Ddeltiger
96% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flower samples. The visualization uses React with D3 v5 scales, specifically `scaleLinear` and `extent`, to position circles in an SVG canvas. Axis components generate tick marks and labels, while the `Marks` component renders each data point as a circle with a tooltip showing the x-value. The chart features a Poppins font, custom axis styling, and formatted tick labels using D3's `format` function.

AAkhilesh7866
96% match
Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization uses React with D3 v5, employing `scaleLinear` for axes, `extent` for domains, and `format` for tick labels. Circular marks are rendered as SVG elements with tooltips, while custom Axis components draw grid lines and labels. The plot uses the Poppins font and a teal color scheme for a polished, modern appearance.

JJulianWgs
96% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, mapping petal length against sepal width to reveal species clustering patterns. Each point appears as a circular mark with a floating tooltip showing the formatted x-axis value. Built with React and rendered as SVG, the visualization uses d3.scaleLinear for axes, d3.extent for domain calculation, and d3.format for tick label formatting. The clean design incorporates a Poppins font, muted axis colors, and custom axis components for a polished, modern aesthetic.

Ttharuta
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

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width. Built with React and D3 v7, it uses `d3.scaleLinear` for axes and maps the data to SVG circles with a teal fill. Axis components render ticks and labels with custom tick formatting via D3’s `format` function. A native SVG `<title>` element provides hover tooltips showing the petal length. The Poppins font and muted gray axis styling give the chart a modern, clean aesthetic.

BBen Seebeck
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