Fork of Stylized Scatter Plot

100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public

Last edited Aug 18, 2024

Created on Aug 18, 2024

This interactive scatter plot displays the classic Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization uses React to declaratively render SVG elements, with D3.js v5 handling data fetching via `csv()` and constructing the linear scales with `scaleLinear()`. Grid lines and tick labels are custom-built through reusable `AxisBottom` and `AxisLeft` components, while `Marks` generates the circular data points with `<circle>` elements and tooltip text. The styling uses the Poppins font and a muted color palette defined in the embedded CSS.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, plotting petal length against sepal width for individual flowers. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes and renders SVG circles as marks, with tooltips showing exact values. The code imports data via `d3.csv` from a GitHub gist, while custom React components handle axis rendering and mark placement. A Poppins font and teal color scheme give the plot its stylized appearance, with loading state shown until data arrives.

Ppakoensi

97% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This visualization displays the classic Iris dataset, plotting petal length against sepal width using a stylized scatter plot. The code builds a React-based SVG visualization with axes generated by custom AxisBottom and AxisLeft components, while a Marks component renders the data points as circles with tooltips. D3.js v5 functions like scaleLinear and extent handle the quantitative scales, with csv loading data from a remote GitHub gist. The minimal design uses Poppins typography and specific teal coloring for the marks.

Llatifiss

97% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of a stylized scatter plot visualizes the classic Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization is built with React and renders as SVG, using D3’s `scaleLinear` to map data values to coordinates. Axes are custom-rendered with React components that generate tick marks and labels, while circles represent each data point. The chart includes styled axis labels, tooltips on hover via the SVG `title` element, and a clean, minimalist design with a Poppins font.

Bbillmccabeusa@hotmail.com

96% match

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 interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. Built with React and rendered as an SVG, it uses D3.js functions like `scaleLinear`, `extent`, and `format` to construct the axes and scale the data. The chart includes styled tick marks, axis labels, and circular data points, with tooltips that display the formatted x-axis value on hover. Styling is applied via CSS with the Poppins font, and the data is loaded asynchronously from a CSV file using D3's `csv` method.

Aamiralitah

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal width on the y-axis, with each flower species represented as a circle. Built with React and rendered as SVG, it uses D3's `scaleLinear` for axes and `extent` for domain computation. The code loads data via D3's `csv` function, applies numeric type coercion, and includes axis components with tick formatting using `format('.2s')`. Styling uses the Poppins font with custom colors for marks, axes, and labels.

SSan

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Circles represent individual flowers, with hover text revealing exact x-axis values. Built with React and D3 v5, it uses `d3.csv` to load data and `d3.scaleLinear` for axes, rendering SVG marks and gridlines via `scaleLinear` and custom `AxisBottom` and `AxisLeft` components.

Eeliarech

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, plotting petal length against sepal width for individual flower samples. The visualization uses React to render SVG elements, with D3 v5’s `scaleLinear` and `extent` functions handling the x and y axis scaling. Axis components generate ticks via `xScale.ticks()`, while the `Marks` component renders each data point as a circle with a tooltip showing the formatted petal length. The chart is styled with the Poppins font and includes labeled axes.

Hhenry c

96% match