Skip to main content
SimilarExport ZIP
100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public
SSandyWu7179290504
Last edited Sep 30, 2022
Created on Sep 30, 2022

This interactive scatter plot visualizes the classic Iris Dataset, mapping petal length and sepal width to the x- and y-axes. Each data point is rendered as an SVG circle colored by species, with a legend and tooltips. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and custom components like `AxisBottom` and `Marks` for layout.

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, mapping petal length and sepal width on the x and y axes while coloring each point by species. Built with React and D3 v5, the SVG chart uses `scaleLinear` and `scaleOrdinal` to position and color the circles, with a custom color legend and hover tooltips. The visualization eschews traditional chartjunk in favor of a minimalist design that emphasizes clear data-ink ratio through its stylized axes and typography.

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

Fork of Stylized Scatter Plot

This scatter plot visualizes the classic Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each flower is represented as a colored circle, with species distinguished by a d3.scaleOrdinal color scale. The chart is built as a React component using reusable axis and mark components, with d3.csv for data loading and d3.scaleLinear for positioning. Axis ticks and labels are generated procedurally, and SVG tooltips display exact petal length values on hover.

DDurga Prasad
95% 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
95% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis. Rendered as an SVG using React and D3 v5, the example loads data via `d3.csv` and uses `d3.scaleLinear` with `d3.extent` to compute scales. Custom Axis components generate tick marks and labels, while circular marks represent individual data points, each with a tooltip showing its x-value.

Cchar0496
95% match