Fork of Stylized Scatter Plot

100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public

Last edited Apr 15, 2023

Created on Apr 15, 2023

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal width on the y-axis, with each flower species represented as a circle. Built with React and rendered as SVG, it uses D3's `scaleLinear` for axes and `extent` for domain computation. The code loads data via D3's `csv` function, applies numeric type coercion, and includes axis components with tick formatting using `format('.2s')`. Styling uses the Poppins font with custom colors for marks, axes, and labels.

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 Iris Dataset, mapping petal length against sepal width for individual flowers. Built with React and rendered as an SVG, it uses D3.js functions like `scaleLinear`, `extent`, and `format` to construct the axes and scale the data. The chart includes styled tick marks, axis labels, and circular data points, with tooltips that display the formatted x-axis value on hover. Styling is applied via CSS with the Poppins font, and the data is loaded asynchronously from a CSV file using D3's `csv` method.

Aamiralitah

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

A scatter plot of the Iris Dataset displays petal length versus sepal width for individual flowers. The visualization uses React components to structure the SVG rendering, with D3 scales and axes handling the coordinate system. D3’s `csv` loader fetches the data, while `scaleLinear` and `extent` compute the domain and range. Interactive tooltips appear on hover via SVG `<title>` elements within each circle. The chart features a clean design with custom Poppins typography, colored teal marks, and styled axis ticks, emphasizing readability.

CCatalin Diaconu

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot displays the classic Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization uses React to declaratively render SVG elements, with D3.js v5 handling data fetching via `csv()` and constructing the linear scales with `scaleLinear()`. Grid lines and tick labels are custom-built through reusable `AxisBottom` and `AxisLeft` components, while `Marks` generates the circular data points with `<circle>` elements and tooltip text. The styling uses the Poppins font and a muted color palette defined in the embedded CSS.

AAnthony Le

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 example visualizes the classic Iris dataset, plotting petal length against sepal width as a scatter plot. The visualization uses React components to render SVG elements, with d3.scaleLinear functions handling the x and y axes. The code loads data with d3.csv, applies axes using custom React components, and displays each flower as a circle with a tooltip showing its petal length. The styling uses the Poppins font and a teal color scheme.

SSamuel Baik

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

A scatter plot of the Iris dataset displays petal length against sepal width, with each of the 150 flowers represented as a circular mark. The visualization is built with React and D3 v5, using `scaleLinear` for both axes and `extent` to compute domains from the loaded CSV data. Axis ticks are generated via `xScale.ticks()`, with labels formatted using D3's `format` utility. The SVG rendering applies a Poppins font and custom styling for ticks and marks, while hover tooltips expose exact petal length values through SVG `<title>` elements.

YYedrup

96% match

Loading thumbnail…

Fork of Stylized Iris Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. The visualization is built with React and D3 v5, using SVG rendering for marks and axes. The code employs D3's `scaleLinear` for positioning, `extent` for domain calculation, and `csv` for data loading. Circles represent data points with hover tooltips. The chart features custom axis components, formatted tick labels using D3's `format` function, and a clean design with Poppins typography.

MMd Alif

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