Stylized Scatter Plott

100%

Stylized Scatter Plott

✓ Published2🌍 Public

Last edited Apr 19, 2021

Created on Apr 19, 2021

This scatter plot visualizes the Iris Dataset, mapping sepal length against sepal width for individual flower specimens. The visualization uses React to render SVG elements, with D3 v6 functions like `scaleLinear` and `extent` for scaling and domain calculation. Axis components are built with reusable React components, while the marks are circles with tooltips displaying values via native SVG `<title>` elements. The chart features a custom Poppins font, light grid lines, and teal-colored data points, with D3's `csv` loading the data from a GitHub-hosted CSV file.

AI-generated description

A scatter plot of [The Iris Dataset] (https://gist.githubusercontent.com/curran/a08a1080b88344b0c8a7/raw/0e7a9b0a5d22642a06d3d5b9bcbad9890c8ee534/iris.csv)

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Scatter plott

This stylized scatter plot visualizes the Iris dataset, plotting sepal length against sepal width across all samples. Built with React and D3 v6, the visualization renders SVG circles scaled by linear scales with nice-ticked axes. The code uses d3.csv for data loading, d3.scaleLinear for positioning, and d3.extent to compute domains. Custom React components (AxisBottom, AxisLeft, Marks) handle rendering, while the Poppins font and teal circle marks create a modern aesthetic. The chart updates responsively to fill the browser window, with formatted tick labels using d3.format.

BbeauMarko

97% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting sepal length against sepal width. Each flower is represented as a circle, with its position determined by the sepal measurements and a tooltip displaying the exact length upon hover. The visualization uses React with D3 v6, employing `scaleLinear` for axes, `extent` for domain calculation, and `csv` for data loading. The SVG rendering includes custom tick marks and axis labels, styled with the Poppins font and a clean color palette.

WWolfgang

96% match

Loading thumbnail…

Stylized Scatter plot

This stylized scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for each flower specimen. Built with React and D3 v5, it uses SVG rendering with custom axis components and circular marks. The visualization employs D3's `scaleLinear` for axis scaling, `extent` to compute data domains, and `format` for tick label formatting. Data is loaded asynchronously from a CSV file via D3's `csv` function, with a clean, minimalist design using the Poppins font and a muted color palette.

Jj-PGi

96% match

Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, showing sepal length against sepal width for individual flowers. The visualization uses React and d3.v5, with scales created via `scaleLinear` and axes rendered as custom SVG components. Circles mark each data point, with native SVG `<title>` elements providing hover tooltips. The code uses `csv` from d3 to load data from a GitHub-hosted CSV file, and includes styling with Poppins fonts and custom tick formatting.

JJacob Potvin

96% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris flower dataset, plotting sepal length against sepal width for individual specimens. The visualization uses React components to render SVG circles and axes, with D3 v5 utilities handling data loading via `d3.csv`, linear scaling with `scaleLinear`, and axis tick generation. The chart features custom styling for marks and axes, including a distinctive cyan fill for data points and a loading state displayed before data arrives.

AAlex Gomes

96% match

Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, showing sepal length and width measurements for individual flowers. Each point is rendered as an SVG circle, with axis labels and tick marks styled using a custom Poppins font and muted color palette. The visualization is built with React and D3 v5, using `scaleLinear` for axis scaling, `extent` to compute domains, and `csv` to load data. Components for axes and marks are modularized, with hover tooltips implemented via native SVG `<title>` elements.

IIlyas Filali

96% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping sepal length and width for individual flowers as circles. Built with React and D3 v5, the visualization renders as SVG, using D3's `scaleLinear` for axes and `extent` to compute domains. Custom `AxisBottom` and `AxisLeft` components generate tick marks, while `Marks` renders each data point with a tooltip showing the formatted x-value. The design employs a Poppins font, teal circles, and muted gray axis lines for a clean, modern aesthetic.

Rroc286

96% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for individual flower samples. The visualization uses React components with D3 scales (d3.scaleLinear) and rendering via SVG, displaying axis ticks generated with custom AxisBottom and AxisLeft components. Each data point is rendered as a circle with a tooltip showing its value, styled with a Poppins font and teal coloring. The data is loaded asynchronously from a CSV file using d3.csv, with numeric fields parsed for quantitative comparison.

Nnicholasgonzalez1

96% match