Skip to main content
SimilarExport ZIP
100%

Stylized Scatter Plot

✓ Published1🌍 Public
KKrishu
Last edited Aug 13, 2020
Created on Aug 13, 2020

This stylized scatter plot visualizes the Iris flower dataset, mapping petal length against sepal width. The code uses React with D3 scales (scaleLinear), and renders SVG circles with native `<title>` elements for tooltips. Axes are built with custom React components using tick marks and formatted labels. The chart applies a Poppins font and muted color palette, with axis labels rotated for readability, all styled through inline CSS.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. The visualization uses React to render SVG circles, with D3’s scaleLinear and extent functions calculating the axes and data domains. Custom AxisBottom and AxisLeft components generate tick marks and labels, while the Marks component adds interactive tooltips via SVG <title> elements. The chart applies a clean aesthetic with Poppins typography, teal markers, and muted gray gridlines, and includes rotated axis labels for readability.

KKrishu
97% match
Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. Built with React and D3 v5, it uses `scaleLinear` for both axes and renders SVG circles via a custom `Marks` component, with axes generated by `AxisBottom` and `AxisLeft`. The visualization includes formatted tick labels, rotated axis titles, and a native SVG tooltip showing the x-value on hover. Styling uses the Poppins font with custom CSS for marks and gridlines.

KKrishu
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 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
95% 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
95% 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
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
Loading thumbnail…

Stylized Scatter plot

This stylized scatter plot visualizes the Iris dataset, plotting petal length against sepal width. The visualization uses React with D3.js (d3.v6) to render SVG circles, with axes generated via custom AxisBottom and AxisLeft components. A title tooltip appears on each circle showing the formatted petal length value. The styling uses the Poppins font and a teal color for data points, with axis labels positioned around the plot margins.

Kkragovic
95% 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
95% match