Skip to main content
SimilarExport ZIP
100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public
GGustavo
Last edited Nov 17, 2021
Created on Nov 17, 2021

This scatter plot visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. Built with React and D3 v5, it uses SVG rendering with `scaleLinear` scales and `csv` data loading to map observations as circles. The visualization includes labeled axes with custom tick formatting, a native SVG `<title>` element for hover tooltips, and the Poppins font. The code demonstrates reusable AxisBottom, AxisLeft, and Marks components for modular chart construction.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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 uses `d3.scaleLinear` for axes and renders circles via SVG. The code employs reusable `AxisBottom`, `AxisLeft`, and `Marks` components, with hover tooltips using SVG `<title>` elements. Data is loaded asynchronously via `d3.csv` and parsed into numeric values, while axes display formatted tick labels and a Poppins font styles the presentation.

Ppei9223
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. Built with React and D3 v5, it uses d3.scaleLinear for both axes and d3.extent to set the domains. The SVG rendering includes custom AxisBottom and AxisLeft components that generate tick marks and labels, while Marks renders circles with native SVG tooltips via the title element. Axis labels are oriented vertically and horizontally, with styling defined by the Poppins font and muted color palette.

JJean David
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. Built with React and D3 v5, it uses d3.scaleLinear for both axes and d3.extent to set the domains. The SVG rendering includes custom AxisBottom and AxisLeft components that generate tick marks and labels, while Marks renders circles with native SVG tooltips via the title element. Axis labels are oriented vertically and horizontally, with styling defined by the Poppins font and muted color palette.

JJean David
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
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 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
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. Built with React and rendered as SVG, it uses d3.scaleLinear for both axes and d3.extent to set domains. The code implements custom AxisBottom and AxisLeft components that generate ticks via xScale.ticks(), while Marks component renders circles with tooltips. The chart includes axis labels and styling with the Poppins font, showcasing a straightforward React-D3 integration pattern.

AAchilleasTyrnenopoulos
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