Fork of Stylized Scatter Plot

100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public

Last edited Jul 28, 2022

Created on Jul 27, 2022

This scatter plot displays the Iris Dataset, mapping petal length on the x-axis against petal width on the y-axis. Each circle represents a flower sample, with a native SVG `<title>` element providing hover tooltips. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `extent` for domain calculation, and custom React components to render the axes and marks. The styling includes Poppins typography and teal-colored data points, with data loaded asynchronously using D3's `csv` parser.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Scatter Plot

A scatter plot of the Iris Dataset displays petal length versus sepal width for individual flowers. The visualization uses React components to structure the SVG rendering, with D3 scales and axes handling the coordinate system. D3’s `csv` loader fetches the data, while `scaleLinear` and `extent` compute the domain and range. Interactive tooltips appear on hover via SVG `<title>` elements within each circle. The chart features a clean design with custom Poppins typography, colored teal marks, and styled axis ticks, emphasizing readability.

CCatalin Diaconu

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. The visualization uses React with D3.js v5 scales, including `scaleLinear` and `extent`, to position SVG circles. Axes are rendered as custom React components, with tick marks and labels styled using Poppins font. The plot provides hover tooltips displaying x-axis values in abbreviated format, while the data loads asynchronously from a CSV file using D3's `csv` function.

GGAMBILLJJ94

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization uses D3.js scaleLinear functions to map data dimensions to SVG coordinates, with React components handling the rendering of axes and circular marks. Each data point appears as a teal circle with a tooltip showing its x-value, while the axes display formatted tick labels. The chart is styled with the Poppins font and a muted color palette defined in the accompanying stylesheet.

RRené Goretzka

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for 150 flower samples. Built with React and D3 v5, the visualization uses d3.scaleLinear for both axes, d3.extent to compute domains, and d3.csv to load and parse the data. Each circle represents a flower, with tooltips displaying formatted petal length values. The SVG rendering includes styled tick marks, axis labels, and a loading state while data is fetched from the remote CSV source.

DDustin Brunner

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis. Red circles represent individual flowers, with tooltips showing values on hover. The visualization uses React to render SVG elements, with D3’s `scaleLinear` and `extent` functions handling scales and domains. Axis components are custom-built using D3 tick generation, while the data is loaded asynchronously via D3’s `csv` function. Styling employs the Poppins font, green gridlines, and red markers for a cohesive aesthetic.

KKate

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 stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width as circular marks. The React-based SVG rendering uses D3’s `scaleLinear` for axes and `csv` for data loading. Each circle includes a `<title>` tooltip showing the x-value, while axis ticks and labels are styled with the Poppins font and muted colors to create a clean, polished appearance.

Eevers-codeshop-ai

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

96% match