Stylized Scatter Plot

100%

Stylized Scatter Plot

✓ Published2🌍 Public

Last edited Dec 5, 2021

Created on Dec 4, 2021

This stylized scatter plot visualizes the Iris flower dataset, plotting petal length against sepal width with circular marks. React renders the SVG visualization, while D3 v7 handles data loading via `csv` and scales with `scaleLinear` and `extent`. The tooltip displays formatted values through native SVG `<title>` elements, and the Poppins font styles the axis labels and tick text with a custom color scheme.

AI-generated description

A program that follows your mouse with a circle.

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 flowers. The code uses React to structure the SVG rendering, with D3 v5 functions like `scaleLinear`, `extent`, and `format` for scales and tick formatting. Axes are built with the custom `AxisBottom` and `AxisLeft` components, while circular marks include a native `<title>` tooltip. The plot uses the Poppins font and D3’s `csv` loader to fetch data from a gist URL.

Ccacho2294

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 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, plotting petal length against sepal width. Each circle represents a sample, with a tooltip displaying the x-axis value. The visualization uses React to render SVG elements, while D3 v5 utilities handle data loading, scales, and formatting. CSV data is fetched asynchronously and parsed via `d3.csv`. The chart features custom axes with styled ticks and labels, uses the Poppins font, and applies a distinct color scheme for the marks.

MMorgan Worrell

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

95% match

Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot visualizes the Iris Dataset by mapping petal length against sepal width, with each flower represented as a circular mark. The React-based implementation uses D3 v5’s scaleLinear for coordinate mapping and extent to set domains, while custom AxisBottom and AxisLeft components render ticks and labels. Data is loaded asynchronously via d3.csv, and the SVG output applies a Poppins font and teal coloring to the points.

Pporrasgp

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