Stylized Scatter Plot

100%

Stylized Scatter Plot

✓ Published2🌍 Public

Jjiro2017

Last edited Sep 21, 2021

Created on Sep 20, 2021

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and sepal width on the y-axis, with each flower represented as a teal circle. Built with React and D3 v7, the visualization uses d3.scaleLinear for both axes and d3.extent to compute the domain from the data. SVG circles render the marks, while React components for the axes and marks handle the tick lines, labels, and hover tooltips. The data loads asynchronously via d3.csv from a remote gist, and the chart applies a custom Poppins font and muted color palette.

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 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

97% match

Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis. Each circle represents one flower sample, with hover tooltips revealing the precise x-value. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes, `extent` to set domains, and `format` for tick labels. The SVG rendering includes custom axis components with tick marks and labels, while data loading relies on D3’s `csv` method with type coercion for numeric values. The chart’s teal circles and Poppins typography give it a modern, stylized appearance.

DDenise Mauldin

97% match

Loading thumbnail…

Stylized Scatter Plot Iris

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and sepal width on the y-axis. Each circle represents a sample, with its position determined by d3.scaleLinear scales and a tooltip showing the petal length value. The visualization uses React components for the axes and marks, with d3.csv loading the data from a remote source. Styling includes custom tick colors and Poppins typography, while the SVG rendering approach implements reusable axis components that generate tick marks and labels based on the provided scales.

EEFezerKW

97% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length against sepal width. Each circle represents a flower specimen, with a fixed radius and teal fill. The chart uses React components to render SVG axes and marks, while D3’s scaleLinear and extent functions compute the scales from the CSV data. Axis labels and tick formatting are customized, and tooltips display values via SVG title elements.

Ddiska432

97% 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

97% match

Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis. Each circle represents an individual iris flower, with hover tooltips revealing the precise petal length value. Built with React and rendered as SVG, the visualization uses d3.scaleLinear and d3.extent to compute scales from the CSV data loaded via d3.csv. Custom React components handle axes and marks, with styling applied through CSS classes for ticks, labels, and the teal-colored data points.

Jjwlam83

97% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, showing petal length against sepal width for individual flower specimens. The visualization uses React with D3 v5 scales and SVG rendering, featuring custom AxisBottom and AxisLeft components that generate tick marks and labels. Circles representing data points include native SVG title tooltips, while the Poppins font and teal color scheme create a distinctive aesthetic. The code leverages d3.scaleLinear, d3.extent, d3.format, and d3.csv for data loading and scaling operations.

AAbhay Kumar

96% match

Loading thumbnail…

Stylized Scatterplot

This stylized scatterplot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. The visualization uses D3.js v7 scales and axes within a React component, rendering marks as SVG circles with a teal fill. Data is loaded asynchronously via D3’s `csv` parser, with numeric conversion applied to all measurements. The axes employ custom tick components, and tooltips are provided through SVG `<title>` elements, formatted using D3’s `format` function. The visual style features a clean design with Poppins typography and subtle grid lines.

Rrmgoldberg24

96% match