Stylized Scatter Plot

100%

Stylized Scatter Plot

✓ Published0🌍 Public

Last edited Aug 24, 2022

Created on Aug 24, 2022

This stylized scatter plot visualizes the relationship between petal length and sepal width in the Iris dataset, sourced from the UCI Machine Learning Repository. It uses React with D3 v5 scales and SVG rendering. The code employs `scaleLinear` for both axes, `extent` for domain calculation, and custom axis components. The Poppins font and teal circle marks create a distinctive visual style, with tooltips displaying formatted x-axis values.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot displays the relationship between petal length and sepal width in the Iris dataset, loaded via d3.csv from a GitHub gist. React components render the SVG circles and axes, with d3.scaleLinear mapping data values to pixel coordinates. The visualization uses a Poppins font, teal-colored marks, and custom axis tick styling. Hovering over a circle reveals its petal length through an SVG title tooltip, while tick formatting uses d3.format to abbreviate values.

SShane Carey

96% match

Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization uses React with D3 v5, employing `scaleLinear` for axes, `extent` for domains, and `format` for tick labels. Circular marks are rendered as SVG elements with tooltips, while custom Axis components draw grid lines and labels. The plot uses the Poppins font and a teal color scheme for a polished, modern appearance.

JJulianWgs

96% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual flower samples. It uses d3.scaleLinear for axis scaling and React to generate the SVG. The marks are rendered as circles with tooltips, styled through CSS with a Poppins font. The code builds custom axes using React components, with the x-axis formatting numbers with a suffix format.

Ttoeric

95% match

Loading thumbnail…

Stylized Scatter Plot

A scatter plot of the Iris Dataset reveals the relationship between petal length and sepal width. The visualization uses React and D3 v5 with SVG rendering, scaling both axes linearly via `d3.scaleLinear` and formatting tick labels with `d3.format`. Stylized elements include a Poppins font, teal circular marks, and custom axis components. Data loads asynchronously using D3's `csv` parser.

Cchamce

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

95% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. The code uses React to structure the SVG rendering, with D3 v5 functions like `scaleLinear`, `extent`, and `format` for scales and tick formatting. Axes are built with the custom `AxisBottom` and `AxisLeft` components, while circular marks include a native `<title>` tooltip. The plot uses the Poppins font and D3’s `csv` loader to fetch data from a gist URL.

Ccacho2294

95% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width. The visualization uses D3.js scaleLinear and extent functions to map data coordinates to SVG positions, while React components render the axes and circular marks. The code applies a custom Poppins font and a muted color palette, with a distinct teal fill for data points and subtle gray styling for grid lines and labels. SVG circles include title elements that display tooltips showing the x-value on hover.

Ssommerh

95% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal width on the y-axis. Each point is rendered as a circle with a tooltip showing the x-axis value on hover. The chart uses D3 v5’s `scaleLinear` for axis scaling and data extent calculation, with custom React components for axes and marks. The visualization is built with React and rendered as an SVG, styled with the Poppins font and a muted color palette for ticks, labels, and data points.

LLaura Pippinato

95% match