Stylized Scatter Plot

100%

Stylized Scatter Plot

✓ Published0🌍 Public

Last edited Nov 9, 2020

Created on Nov 8, 2020

This stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis. The chart uses React for the user interface and D3’s `scaleLinear` and `extent` functions for data scaling, with SVG circles as marks. Each circle includes a tooltip using D3’s `format` function, while axis labels and tick styling are customized through CSS. The data is loaded asynchronously via D3’s `csv` function from a GitHub-hosted CSV file.

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, plotting petal length against sepal width. Each circle represents a sample, with a tooltip displaying the x-axis value. The visualization uses React to render SVG elements, while D3 v5 utilities handle data loading, scales, and formatting. CSV data is fetched asynchronously and parsed via `d3.csv`. The chart features custom axes with styled ticks and labels, uses the Poppins font, and applies a distinct color scheme for the marks.

MMorgan Worrell

97% 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.js v5 scales. React components render SVG circles for each data point, with tooltips showing formatted values via the `title` element. The chart includes custom axes using `d3.scaleLinear` and `d3.extent`, styled with Poppins typography and teal-colored marks. Data loads asynchronously from a CSV URL using `d3.csv` within a custom `useData` hook.

FFAN CHI YU(范紀予)

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

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

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

96% match

Loading thumbnail…

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. The React-based implementation uses d3.scaleLinear for both axes and renders circles as SVG marks with native tooltips. Styling applies a Montserrat font, light gray grid lines from custom axis components, and blue circles with a fixed radius. Data is loaded asynchronously via d3.csv and parsed into numeric fields before scaling.

Ccoltonjcox92

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

96% match

Loading thumbnail…

Stylized scatter plot of the Iris Dataset

A stylized scatter plot visualizes the Iris Dataset, displaying petal length along the x-axis and sepal width along the y-axis. The chart is built with React and D3 v6, using SVG rendering for crisp, scalable graphics. Data is loaded and parsed from a CSV file via a custom React hook that converts string values to numbers. The visualization employs D3's scaleLinear for axis scaling and extent functions, while custom React components handle axis tick rendering and show tooltips with formatted values.

Fforcox43

96% match