Fork of Stylized Scatter Plot

100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public

Last edited Oct 22, 2021

Created on Oct 22, 2021

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length against sepal width. It uses React components for rendering SVG elements, with d3-scale functions like `scaleLinear` and `extent` to compute the axes and positions. Stylized tick marks and labels are generated by custom AxisBottom and AxisLeft components, while d3.csv loads and parses the data. The circles include native SVG `<title>` elements for tooltips, and the Poppins font is applied globally.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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 example shows a scatter plot of the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. The visualization uses React to render SVG circles as data marks, with d3.scaleLinear for axes and d3.csv for data loading. Axis components are custom-built with d3 ticks, and each circle includes a native SVG `<title>` element for hover tooltips. The styling uses the Poppins font and a muted teal color for marks.

Aavneet12284

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This visualization is a stylized scatter plot of the classic Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis. The SVG rendering uses React components to generate the chart’s marks (colored circles) and its two axes, with all layout and scales handled by D3’s linear scale and extent functions. The code also leverages D3’s CSV loader for data ingestion and formatting functions for tick labels. The plot’s design incorporates a custom Poppins font and muted color palette.

Aaine-ian

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 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 example visualizes the Iris Dataset as a stylized scatter plot, mapping petal length to the x-axis and sepal width to the y-axis. Built with React and D3 v5, it renders SVG circles with tooltips via nested `<title>` elements. The code uses `d3.csv` for data loading, `scaleLinear` for coordinate mapping, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) to generate axes and data points with Poppins typography and a teal color scheme.

SStudentCZ

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

A scatter plot of the Iris dataset displays petal length against sepal width, with each flower represented by a teal circle. The visualization uses React components and D3 scales to map the data, with axes generated by custom AxisBottom and AxisLeft components. The code loads data via d3.csv, applies linear scales with d3.scaleLinear, and formats tick labels using d3.format. Styling includes Poppins font and custom tick and mark colors, with a native SVG title element providing tooltips.

TTina Nemati

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

95% match