Fork of Stylized Scatter Plot

100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public

Last edited Aug 31, 2023

Created on Aug 31, 2023

This visualization displays the classic Iris dataset, plotting petal length against sepal width as a scatter plot of individual circles. The data loads asynchronously via d3.csv and renders through React components using SVG. Code splits responsibilities into separate modules for the axes and marks, with scales constructed using d3.scaleLinear and extents computed via d3.extent. Axis labels appear rotated for the y-axis, and hover tooltips show formatted petal length values.

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

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

Loading thumbnail…

Fork of Stylized Scatter Plot

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.

SSan

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual iris flowers. The visualization uses React with a D3.js v5 scaleLinear for axis scaling and rendering via SVG. The code employs D3’s csv parser to load data, extent and nice functions for domain calculation, and format for tick label formatting. Circles represent data points with tooltips showing x-values, styled with Poppins font and a teal color scheme.

JJenny

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual iris flowers. The visualization uses React with D3 v5 scales and SVG rendering, with the data loaded asynchronously via d3.csv. The code includes custom axis components that generate tick marks and labels, while circular marks display each data point with a tooltip showing the exact petal length value. The chart incorporates a Poppins font and muted color palette for a clean, stylized appearance.

JJohanna Magdalena

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

96% match

Loading thumbnail…

Fork of Stylized Scatter Plot

A React-based scatter plot visualizes the Iris Dataset, showing petal length against sepal width. The visualization uses d3.scaleLinear for both axes, with formatted tick labels and axis labels. Data loads via d3.csv from a GitHub gist, parsing numeric values for all four iris measurements. The SVG rendering displays circles for each data point, with hover tooltips showing petal length values. The chart uses a Poppins font and custom styling for ticks, marks, and axis labels, with a responsive design that centers the visualization in the viewport.

GGregS1290

96% match