Skip to main content
SimilarExport ZIP
100%

Stylized Scatter Plot

✓ Published3🌍 Public
Yyejichun@naver.com
Last edited Dec 20, 2021
Created on Dec 20, 2021
Forked from Stylized Bar Chart

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.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to render the data.

MIT Licensed

Similar vizzes

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

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 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.scaleLinear. The React-based visualization renders circles as marks via SVG, with styled axes built through d3.ticks. The code uses d3.csv to load and parse the data, while custom React components (AxisBottom, AxisLeft, and Marks) handle the rendering, applying a Poppins font and a teal color scheme to the circular data points.

Aaparnasj-sj
96% 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 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(范紀予)
96% match
Loading thumbnail…

Stylized Scatter Plot

This scatter plot visualizes the relationship between petal length and sepal width in the classic Iris dataset. Each red circle represents a flower sample, with axis labels and tick marks rendered using React and reusable D3 scale components. The code leverages d3.csv for data loading, d3.scaleLinear for coordinate mapping, and d3.format for tick label formatting, while all marks and axes are drawn as SVG elements within a React component hierarchy.

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