Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Stylized Scatter Plot

✓ Published1🌍 Public
NNikhilchiguru-8
Last edited Mar 8, 2023
Created on Mar 8, 2023

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis using d3.scaleLinear scales. The React application loads CSV data via d3.csv and renders SVG circles with custom React components for axes and marks. Data points appear as teal circles with tooltips showing formatted values, while styled axis labels and tick marks use the Poppins font. The visualization demonstrates a clean, minimal aesthetic with fixed dimensions and margins.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Stylized Scatter Plot

This example is a scatter plot of the Iris Dataset, mapping petal length against sepal width. The visualization uses a React and D3 v5 architecture, with linear scales (`scaleLinear`) from D3 to map data values to pixel coordinates. The SVG rendering is composed from custom React components for axes and circular marks. The page loads the Iris dataset from a GitHub gist using D3's `csv` function, and includes an embedded YouTube video in its README. The chart uses a clean, minimal design with Poppins typography and a teal color for the data points.

NNikhilchiguru-8
96% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width with circular marks. The React-based implementation uses D3 v5 scales (`scaleLinear`) and extent calculations to position points, while custom AxisBottom and AxisLeft components render the tick marks. Styled axes and teal-colored circles follow the Poppins font, with hover tooltips displaying formatted petal length values. The code loads CSV data via `d3.csv` and renders the visualization as SVG.

LLyco Angelo Ty
96% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, displaying petal length against sepal width with React and D3 v5. Data loads asynchronously via `csv()` and scales linearly with `scaleLinear`. SVG circles with native tooltips render the marks, while custom React components generate axes and tick lines. The chart uses a Poppins font and a minimal color palette, with axis labels rotated for readability.

Sstwxs
95% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. The visualization uses React to render SVG circles as data marks, with d3.scaleLinear for axes and d3.csv for data loading. Axis components are custom-built with d3 ticks, and each circle includes a native SVG `<title>` element for hover tooltips. The styling uses the Poppins font and a muted teal color for marks.

Aavneet12284
95% match
Loading thumbnail…

Fork of Stylized Scatter Plot

A scatter plot of the Iris Dataset maps petal length against sepal width using two linear scales. The React-based visualization renders SVG circles with D3 scales and axes, including formatted tick labels and axis labels. Styled with the Poppins font, the marks and axes use muted teal and gray colors, with a hover tooltip showing the x-value. Data loads asynchronously from a CSV source via D3's `csv` parser.

Ttarun1219
95% match
Loading thumbnail…

Fork of Stylized Scatter Plot

A stylized scatter plot displays the Iris Dataset, mapping petal length against sepal width for individual flowers. The visualization uses React components to render SVG circles, with axes built from d3 scales and tick formatting. Data is loaded asynchronously via d3.csv and parsed with numeric coercion. The appearance is customized with the Poppins font, teal-colored marks, and axis labels, while the clean design highlights the dataset's distribution.

Ssagar basavaraj
95% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against sepal width as a stylized scatter plot. Built with React and D3 v5, it uses `d3.scaleLinear` for both axes and renders SVG circles for each data point. The code includes reusable axis and mark components, with tick formatting via `d3.format` and hover tooltips using SVG `<title>` elements. Data loads asynchronously from a CSV URL using `d3.csv`, and the visualization features custom axis labels and a clean, minimalist design with the Poppins font.

SSophia Chiao
95% match
Loading thumbnail…

Fork of Stylized Scatter Plot

A fork of a stylized scatter plot visualizes the Iris Dataset, mapping petal length against sepal width. The React application uses d3.csv for data loading and d3.scaleLinear with .nice() for axis scaling. SVG circles are rendered with tooltips via native <title> elements. The code leverages React hooks (useState, useEffect) for asynchronous data fetching and d3.format for axis tick labels.

PPY09052021
95% match