Skip to main content
SimilarExport ZIP
100%

Stylized Scatter Plot

✓ Published3🌍 Public
Ppatasky
Last edited May 26, 2021
Created on May 25, 2021

This example visualizes the classic Iris Dataset, plotting petal length against sepal width. A responsive tooltip, implemented with SVG `<title>` elements, reveals each flower's petal length on hover. Built with React and D3 v5, it uses `scaleLinear` from `d3-scale` to map data values, plus custom React components for axes and marks. The chart uses a clean, stylized design with a Poppins font and muted green and teal colors.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length on the x-axis and sepal width on the y-axis. Each flower is rendered as a circular mark, with a native SVG tooltip showing the x-value on hover. The visualization uses React components to structure the axes and marks, while D3 scaleLinear and extent functions handle the data scaling. Axes are drawn with custom D3 ticks and gridlines, styled with a Poppins font and teal color scheme, with source text shown while data loads.

Bbootshine2
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

This example shows a scatter plot of the Iris Dataset, visualizing petal length against sepal width. Each circle represents a flower sample, with axis labels and tick marks provided by custom React components. The visualization is built with React and D3 v5, using `scaleLinear` for both axes and `csv` to load the data. SVG circles render the marks, and a native `<title>` element provides tooltips showing the tick-formatted values. The styling uses the Poppins font and a teal color for the marks.

YYibo Zhang
95% match
Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. The React-based visualization uses D3's `scaleLinear` and `extent` functions to compute scales, while custom SVG components render the axes and circular marks. Styling employs the Poppins font with teal-colored circles and muted gray gridlines. The chart includes labeled axes with rotated y-axis text and a tooltip showing the petal length value on each point hover, loaded asynchronously via D3's `csv` parser.

SShashwat Priyadarshi
95% 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
95% match
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal width on the y-axis. Each point is rendered as a circle with a tooltip showing the x-axis value on hover. The chart uses D3 v5’s `scaleLinear` for axis scaling and data extent calculation, with custom React components for axes and marks. The visualization is built with React and rendered as an SVG, styled with the Poppins font and a muted color palette for ticks, labels, and data points.

LLaura Pippinato
95% 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
95% 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
95% match