Fork of Stylized Scatter Plot

100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public

Last edited May 18, 2026

Created on May 18, 2026

This stylized scatter plot visualizes the Iris dataset, plotting petal length against sepal width. Built with React and D3 v5, it uses a linear scale for both axes, with tick marks and axis labels rendered as SVG elements. The plot includes tooltips showing the x-value on hover and custom styling via the Poppins font and specific color palette for marks and ticks. The data is loaded asynchronously from a CSV URL using D3’s `csv` function.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. The visualization uses React with D3.js v5 scales, including `scaleLinear` and `extent`, to position SVG circles. Axes are rendered as custom React components, with tick marks and labels styled using Poppins font. The plot provides hover tooltips displaying x-axis values in abbreviated format, while the data loads asynchronously from a CSV file using D3's `csv` function.

GGAMBILLJJ94

98% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against sepal width as a stylized scatter plot. Built with React and D3 v5, it uses `d3.scaleLinear` for both axes and renders SVG circles for each data point. The code includes reusable axis and mark components, with tick formatting via `d3.format` and hover tooltips using SVG `<title>` elements. Data loads asynchronously from a CSV URL using `d3.csv`, and the visualization features custom axis labels and a clean, minimalist design with the Poppins font.

SSophia Chiao

97% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width. Built with React and D3 v5, it renders SVG circles for each data point, with axes composed from custom tick components. The code uses d3.csv for data loading, d3.scaleLinear for scaling, and d3.extent for domain calculation. Styling comes from the Poppins font and CSS-defined tick, mark, and label classes, while tooltips are implemented through SVG `<title>` elements.

RRamashish Pandey

97% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, displaying petal length against sepal width with React and D3 v5. Data loads asynchronously via `csv()` and scales linearly with `scaleLinear`. SVG circles with native tooltips render the marks, while custom React components generate axes and tick lines. The chart uses a Poppins font and a minimal color palette, with axis labels rotated for readability.

Sstwxs

97% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual iris flowers. The visualization uses React with D3 v5 scales and SVG rendering, with the data loaded asynchronously via d3.csv. The code includes custom axis components that generate tick marks and labels, while circular marks display each data point with a tooltip showing the exact petal length value. The chart incorporates a Poppins font and muted color palette for a clean, stylized appearance.

JJohanna Magdalena

97% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis. Rendered as an SVG using React and D3 v5, the example loads data via `d3.csv` and uses `d3.scaleLinear` with `d3.extent` to compute scales. Custom Axis components generate tick marks and labels, while circular marks represent individual data points, each with a tooltip showing its x-value.

Cchar0496

97% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of the “Stylized Scatter Plot” visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. The scatter plot uses React with d3.v5 to compute linear scales via `scaleLinear` and render SVG circles as marks, styled with a distinct teal fill. Axis components are built with React from D3’s tick values, and hover tooltips display formatted tick values. Data is loaded asynchronously with the `csv` function from D3.

Sseanmdalrymple@protonmail.com

97% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis for each flower specimen. Built with React and D3 v5 using SVG rendering, the chart displays all data points as teal circles with hover tooltips showing exact values. The code uses D3's `scaleLinear` and `extent` functions to construct the axes, while the `csv` loader fetches data from a GitHub gist. The minimalist design employs Poppins typography and custom axis tick styling for a clean presentation.

NNart Williamson

97% match