Stylized Scatter Plot

100%

Stylized Scatter Plot

✓ Published2🌍 Public

Last edited Aug 5, 2021

Created on Aug 5, 2021

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.

AI-generated description

Smiley face implementation with React.

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

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

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

A scatter plot displays the Iris Dataset, plotting petal length against sepal width with a circular mark for each sample. The visualization uses React components to render SVG elements, with d3.scaleLinear for axes scaling and d3.extent for domain calculation. Axes are custom-built components using SVG lines and text, styled with the Poppins font. Data is loaded asynchronously via d3.csv and transformed with numeric type coercion, while tooltips appear on hover through SVG title elements.

RRajat Dangat

96% match

Loading thumbnail…

Stylized Scatter Plot

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.

SSnapika

96% match