Skip to main content
SimilarExport ZIP
100%

Stylized Scatter Plot

✓ Published2🌍 Public
KKevin McMorrow
Last edited Sep 28, 2021
Created on Sep 28, 2021
Forked from Stylized Bar Chart

This stylized scatter plot visualizes the relationship between petal length and sepal width in Fisher’s Iris dataset, encoding each flower as a circle with a tooltip showing its petal length on hover. The D3.js v7 scales (`d3.scaleLinear`) map the data to SVG coordinates, with axes drawn via custom `AxisBottom` and `AxisLeft` components. The React application loads the CSV using `d3.csv`, formats tick labels with `d3.format`, and renders the plot using SVG elements. The Poppins font and muted color scheme give the chart a clean, modern aesthetic.

AI-generated description
MIT Licensed

Similar vizzes

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

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
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
94% 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
94% 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
94% 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
94% 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
94% match
Loading thumbnail…

Stylized Scatter Plot

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.

Jjiro2017
94% match