Stylised Scatter Plot

100%

Stylised Scatter Plot

✓ Published4🌍 Public

Last edited Mar 22, 2021

Created on Mar 11, 2021

A stylised scatter plot displays the relationship between petal length and sepal width from the Iris dataset, rendered as an SVG using React. The visualization uses D3's `scaleLinear` and `extent` functions to map data values to pixel coordinates, with axes generated by custom `AxisBottom` and `AxisLeft` components. Point positions are plotted via `Marks` circles, with tooltips showing formatted values. The data is loaded through D3's `csv` function from a GitHub Gist, and styling is applied via Poppins font and teal-colored marks.

AI-generated description

A scatter plot showing the Iris dataset and the relationship between Petal Length and Sepal Width (adaptable to any variable) using D3 and React.

MIT Licensed

Similar vizzes

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

This stylized scatterplot visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. The SVG rendering uses React components with D3 scales (d3.scaleLinear) and axes (AxisBottom and AxisLeft) built from D3 tick marks. The d3.csv function loads the data, while circle marks include native SVG tooltips via the title element. The chart uses a Poppins font, teal circles, and italic axis labels with abbreviated tick formatting via d3.format.

KK3zter

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 relationship between petal length and sepal width in the classic Iris dataset, loaded via the D3 `csv` utility. React state manages the data, while D3's `scaleLinear` and `extent` functions map values to a fixed SVG coordinate system. Circles render as marks with tooltips, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) draw axes and points. The chart uses a Poppins font, styled grid lines, and a teal color scheme to create a polished, modern look.

Yyejichun@naver.com

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

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

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

95% match