Fork of Stylized Scatter Plot

100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public

Last edited Sep 12, 2022

Created on Sep 12, 2022

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the classic Iris Dataset, plotting petal length against sepal width as a stylized scatter plot. The implementation uses React to render the SVG elements, while D3.js provides the data loading, linear scaling, and axis tick generation through `scaleLinear` and `extent`. The `Marks` component draws each circle with a tooltip showing the formatted x-value, and the axes are constructed from reusable `AxisBottom` and `AxisLeft` components. The design features a Poppins typeface, muted gray and teal colors, and generous margins for axis labels.

RReymond Mesuga

97% match

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot

This visualization is a scatter plot of the Iris dataset, showing petal length on the x-axis against sepal width on the y-axis. Each point is a semi-transparent teal circle with a hover tooltip displaying its exact x-value. The plot uses a clean, minimal design with labeled axes styled with the Poppins font. Built with React and rendered as SVG, the code uses D3 v5 functions like `scaleLinear`, `extent`, and `format` to scale the data and generate axis ticks. The data is loaded asynchronously from a CSV file using D3's `csv` method, and the axes and marks are constructed via custom React components (`AxisBottom`, `AxisLeft`, `Marks`).

Ppakoensi

96% 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 example visualizes the Iris Dataset, plotting petal length against sepal width as a scatter plot. Each flower is represented by an SVG circle with hover tooltips showing the exact x-axis value. The visualization is built using React for component structure, D3 v5 for data loading and linear scales, and SVG for rendering. The code includes custom AxisBottom, AxisLeft, and Marks components, with axis labels styled using the Poppins font and a clean teal color scheme for the data points.

GGuilinabaoge

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 example visualizes the Iris Dataset, plotting petal length against sepal width as a stylized scatter plot. Built with React and D3 v5, it uses `d3.scaleLinear` for both axes and renders SVG circles for each data point. The code includes reusable axis and mark components, with tick formatting via `d3.format` and hover tooltips using SVG `<title>` elements. Data loads asynchronously from a CSV URL using `d3.csv`, and the visualization features custom axis labels and a clean, minimalist design with the Poppins font.

SSophia Chiao

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 example visualizes the classic Iris Dataset, plotting petal length against sepal width as a scatter plot. The visualization uses React to render SVG circles and axes, with D3 (v5) for data loading, scaling, and axis generation. A `Poppins` font style is applied to the page, while the marks are styled with a teal fill and the axes use light gray tick lines. The code includes a formatted tick label function that abbreviates values using D3’s `format('.2s')`.

Ttrissentety

96% match