Fork of Stylized Scatter Plot

100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public

Last edited Mar 26, 2021

Created on Mar 26, 2021

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.

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 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

97% 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

97% 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, 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 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

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis for each flower specimen. Built with React and D3 v5 using SVG rendering, the chart displays all data points as teal circles with hover tooltips showing exact values. The code uses D3's `scaleLinear` and `extent` functions to construct the axes, while the `csv` loader fetches data from a GitHub gist. The minimalist design employs Poppins typography and custom axis tick styling for a clean presentation.

NNart Williamson

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of a stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Built with React and D3 v5, it renders SVG circles with tooltips and custom axes using `scaleLinear` and `format`. The code includes unused D3 band scales and appended SVG elements, though the active visualization relies on the React components for axis and mark rendering. Data loading uses the `csv` function from D3, with all numeric columns parsed in a row accessor.

Eeliarech

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. Built with React and D3 v5, it uses SVG circles to render each data point, with hover tooltips displaying formatted values. The axes are constructed via reusable components (AxisBottom, AxisLeft) that leverage D3’s scaleLinear and extent functions, while the CSS styles the marks and labels with a clean, minimal aesthetic.

Jjerryren527

96% match