Fork of Stylized Scatter Plot

100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public

Last edited Oct 26, 2022

Created on Oct 26, 2022

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric flower measurements (sepal length/width, petal length/width) by selecting which attribute corresponds to each axis via dropdown menus. Built with React and D3 v5, it uses `scaleLinear` for both axes, `extent` to compute domains from the CSV data loaded through `csv`, and renders SVG circles with native `<title>` tooltips. The chart includes styled axis labels using the Poppins font and provides dynamic axis tick formatting with `format`.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Scatter Plot

A scatter plot of the Iris dataset, this interactive visualization lets users explore relationships between four numeric attributes (sepal and petal length/width) via dropdown menus. Built with React and D3 v5, the SVG chart displays all 150 flowers as teal circles, with axes generated by custom React components using d3.scaleLinear and d3.extent. The code demonstrates modular React components for marks, axes, and a reusable dropdown, with data fetched asynchronously via d3.csv.

Jjchen6912

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

94% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis for each flower specimen. Built with React and D3 v5 using SVG rendering, the chart displays all data points as teal circles with hover tooltips showing exact values. The code uses D3's `scaleLinear` and `extent` functions to construct the axes, while the `csv` loader fetches data from a GitHub gist. The minimalist design employs Poppins typography and custom axis tick styling for a clean presentation.

NNart Williamson

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

94% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements (sepal and petal length/width) and species. Two dropdown menus, implemented as React components, let viewers independently select which attributes appear on the x- and y-axes. The visualization uses d3.scaleLinear for coordinate mapping, with React managing state updates and SVG rendering ticks, circles, and axis labels. Data loads asynchronously via d3.csv from a remote gist, and each data point includes a tooltip showing its exact value.

SShaneBowen1

94% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, rendered as an SVG using React and D3 v5. It displays sepal width along the y-axis and a user-selected attribute on the x-axis, chosen via a dropdown menu. The code uses D3’s `scaleLinear`, `extent`, and `format` for axis scaling and tick formatting, with custom `Marks` and axis components. Data is fetched as CSV using `d3.csv`, with styles defined in CSS for axes and labels.

JJusung

94% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal length, sepal width, petal length, and petal width. Users can select which attributes to plot on the x-axis and y-axis via dropdown menus, with axis labels updating accordingly. Built with React and D3 v5, the visualization uses d3.scaleLinear for scaling, d3.extent for domain calculation, and SVG circles for data points. Each point includes a tooltip showing its x-axis value. The data loads asynchronously from a CSV file using d3.csv.

Cchamce

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

94% match