Fork of Stylized Scatter Plot

100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public

Last edited Jul 21, 2022

Created on Jul 21, 2022

This interactive scatter plot visualizes Fisher’s Iris dataset, allowing users to switch the x-axis attribute among sepal and petal measurements via a React dropdown menu. The visualization uses D3 v5’s `scaleLinear` and `extent` functions to map data to SVG coordinates, with axes rendered as custom React components. Stylized with the Poppins font and teal circular marks, hovering reveals tooltips formatted with D3’s `format`. The y-axis remains fixed on sepal width while the x-axis changes dynamically.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive visualization displays Fisher's Iris flower dataset as a scatter plot, allowing users to select which flower measurements (sepal length, sepal width, petal length, or petal width) appear on the x and y axes via dropdown menus. Each flower is rendered as an SVG circle, with D3 scaling below the threshold. Built with React and D3 v5, the code utilizes D3’s `scaleLinear`, `extent`, and `csv` functions for data loading and scaling, while custom `AxisBottom`, `AxisLeft`, and `Marks` components handle chart rendering.

JJuan Raul de la Guardia

94% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attributes appear on the x and y axes via React dropdown menus. The visualization uses d3.scaleLinear for both axes, d3.extent for domain calculation, and d3.format for tick labels, with SVG circles rendered through React components. Data is loaded asynchronously using d3.csv from a GitHub gist, and the chart includes styled axes with tick marks, axis labels, and hover tooltips.

Sstefanpullen

93% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting different attributes from dropdown menus. The visualization uses React with d3.scaleLinear for positioning, d3.csv for data loading, and d3.format for axis tick labels. Rendered as SVG, the plot displays circles for each data point with axis labels and tick marks styled by the Poppins font.

RRED98310

93% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements such as petal and sepal length and width. Users can dynamically select which measurements appear on the x- and y-axes via dropdown menus, with all points rendered as SVG circles. The visualization is built using React and D3 v5, leveraging D3’s `scaleLinear` for axis scaling and `csv` for data loading. Axis ticks and labels are generated with custom React components, while a tooltip shows formatted values on hover.

Sseanmdalrymple@protonmail.com

92% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, comparing sepal width against petal length for individual flower specimens. The visualization uses React components to render SVG circles, with d3-scale’s `scaleLinear` mapping data values to pixel coordinates and d3-format’s `format` function for axis tick labels. Axes are built as reusable React components, and hovering over any point reveals its exact petal length via SVG `<title>` tooltips. The design features a clean, stylized aesthetic with Poppins typography and muted teal-colored markers.

Wweny1109

92% match

Loading thumbnail…

Fork of Stylized Scatter Plot

Wweny1109

92% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements by switching the X and Y axes via dropdown menus. Built with React and D3 v5, the SVG renderings use d3.scaleLinear for axes and d3.extent for data domains. The code explicitly parses numeric CSV values and renders circles for each data point.

AAnkit-Ian-53787

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

92% match