Skip to main content
SimilarExport ZIP
100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public
AAchilleasTyrnenopoulos
Last edited Nov 13, 2021
Created on Nov 13, 2021

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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
97% 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
97% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This visualization is a scatter plot of the Iris Dataset, showing petal length against sepal width. Built with React and SVG, it uses D3 v5's `scaleLinear`, `extent`, and `format` to compute axes and tick labels. The `Marks` component renders each data point as a circle with a tooltip, while `AxisBottom` and `AxisLeft` generate styled grid lines and labels. The chart is styled with the Poppins font and a teal color scheme for marks.

NNikhil Patel
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
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, 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 labeled axes and tooltips. Built with React and D3 v5, it renders as an SVG using scaleLinear scales for positioning. The code defines custom AxisBottom, AxisLeft, and Marks components, with d3.csv loading the data and d3.format handling tick label formatting. Points are drawn as circles with a fixed radius, styled with a teal fill against a clean, minimal chart layout.

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

GGustavo
96% match