Stylized Scatter Plot

100%

Stylized Scatter Plot

✓ Published0🌍 Public

Last edited Sep 27, 2020

Created on Sep 27, 2020

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for iris flowers. Built with React and D3 v5, it renders as an SVG with axes generated by custom `AxisBottom` and `AxisLeft` components. The `Marks` component maps data points to circles with tooltips, while scales are created using `scaleLinear` and `extent`. Styling incorporates the Poppins font and a teal color scheme for the marks, with a loading state displayed until the CSV data loads via `useData` and `d3.csv`.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Scatter Plot

A scatter plot of the Iris Dataset shows petal length on the x-axis and sepal width on the y-axis. Built with React and D3 v5, it uses `scaleLinear` for axes and renders SVG circles via a custom `Marks` component. Data is loaded asynchronously from a CSV using D3’s `csv` function. Axis ticks and labels are styled with the Poppins font, and each point includes a tooltip formatted with D3’s `format` function.

Ddeltiger

97% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width as teal circles with a clean, minimal aesthetic. Built with React and D3 v5, it uses `scaleLinear` and `extent` to map data values to SVG coordinates, while separate axis components render grid lines and tick labels. The code defines reusable `AxisBottom`, `AxisLeft`, and `Marks` components, with the latter generating circles and native SVG tooltip titles. The data is loaded asynchronously via a custom `useData` hook that parses CSV values into numbers.

MMosheAron

96% match

Loading thumbnail…

Stylized Scatter Plot 1216

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for individual flowers. Built with React and D3 v5, it uses `scaleLinear` functions to map data values to SVG coordinates. The `AxisBottom` and `AxisLeft` components render tick marks and labels, while the `Marks` component draws circles with native SVG `<title>` tooltips. Data is loaded asynchronously via `d3.csv` and transformed with numeric coercion.

DDavid-Wong110723

96% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, comparing petal length against sepal width. Each flower is drawn as a circle, with hover tooltips revealing the precise x-axis value. The visualization uses React with D3 v5, leveraging `scaleLinear` for axes, `extent` for domain calculation, and `csv` for dataset loading. A clean, muted color palette and Poppins typography define the aesthetic, while custom `AxisBottom`, `AxisLeft`, and `Marks` components render the SVG output.

Mmuhammadshumas

96% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis using d3.scaleLinear. The React-based visualization renders circles as marks via SVG, with styled axes built through d3.ticks. The code uses d3.csv to load and parse the data, while custom React components (AxisBottom, AxisLeft, and Marks) handle the rendering, applying a Poppins font and a teal color scheme to the circular data points.

Aaparnasj-sj

96% match

Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot visualizes the relationship between petal length and sepal width in the Iris dataset. The code uses React to render an SVG with D3's `scaleLinear` for axes and data scaling, along with custom `AxisBottom` and `AxisLeft` components to generate ticks. The `Marks` component creates circles with a tooltip title for each data point. Axis labels are styled with the Poppins font, and data loading is handled by D3's `csv` function.

Ccharliemok

96% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Built with React and D3 v5, it uses `scaleLinear` and `extent` to compute scales, with custom `AxisBottom` and `AxisLeft` components for tick rendering. Each data point is an SVG circle with a tooltip, styled with a Poppins font and teal marks. The code loads CSV data via `d3.csv` and `useData` hook, demonstrating a clean React-D3 integration.

SSam

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