Improved Scatterplot with Menus

100%

Improved Scatterplot with Menus

✓ Published1🌍 Public

Last edited Nov 15, 2021

Created on Nov 15, 2021

This interactive scatterplot displays the Iris flower dataset, loaded via D3’s `csv` from a GitHub Gist, with React dropdown menus that let the user change which numeric attributes are mapped to the X and Y axes. The SVG visualization uses D3 scales (`scaleLinear`, `scaleOrdinal`) for positioning and species-based coloring, while custom React components `AxisBottom`, `AxisLeft`, and `Marks` render tick marks, labels, and circles. The axis labels update dynamically based on the selected menu values, and hovering over a circle reveals a tooltip via an SVG `<title>` element.

AI-generated description

A scatterplot of the Iris Data Set loaded as a .csv from GitHub Gist

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot with Menus

This interactive scatterplot displays the Iris dataset, loaded via d3.csv from a GitHub Gist. React state manages two dropdown menus that select which of the four flower attributes (sepal length/width, petal length/width) are mapped to the x- and y-axes, updating the scales and axes dynamically. The SVG visualization uses d3.scaleLinear for positioning, custom React components for the axes and marks, and native SVG <title> elements for tooltips. A Poppins font and fixed styling give the chart a clean, button-driven interface.

KKai Stewart

93% match

Loading thumbnail…

Polished Scatterplot with Menus

This interactive scatterplot displays the Iris flower dataset, with dropdown menus letting users select which numerical attribute maps to the x- and y-axes. The visualization is built with React and D3 v5, using `scaleLinear` and `extent` for axis scaling, while the `csv` loader fetches the data. React state updates trigger re-renders of the SVG marks, with styled tick lines and text labels from custom `AxisBottom` and `AxisLeft` components, and circles colored with a fixed teal fill.

Ffjvoris

93% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, plotted with D3 scales and rendered as SVG circles via React components. Two dropdown menus, built with React state, let users select which of the four flower measurements (sepal length/width, petal length/width) to map to the x- and y-axes, with axis labels updating accordingly. The visualization uses `d3.csv` for data loading, `d3.scaleLinear` for axes, and custom React components for axes and marks, with native SVG `<title>` elements for hover tooltips.

LLisa Wagner

92% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which numeric attributes appear on the x- and y-axes via dropdown menus. Built with React and D3 v5, it renders SVG circles for each data point, with axes generated through custom React components. The code uses `d3.scaleLinear` for scaling, `d3.extent` for domains, and `d3.csv` for loading data, while `ReactDropdown` provides the menu controls.

Ttharuta

92% match

Loading thumbnail…

Scatter Plot with Menus

A scatter plot of the Iris dataset, rendered as SVG in React, lets users select which attribute appears on each axis through two dropdown menus. The chart maps petal and sepal measurements, using `d3.scaleLinear` for scales and `d3.extent` to compute domains. Axes are drawn with shared `AxisBottom` and `AxisLeft` components, while `Marks` renders circles with tooltips. The code loads CSV data via `d3.csv`, and the dropdowns update state to reassign the x and y values dynamically.

BBen Seebeck

92% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically change which attributes are displayed on the x and y axes through two dropdown menus. Built with React managing state and D3 v7 utilities like `scaleLinear` and `extent` for scaling, the SVG rendering includes custom axis components and circles with tooltips. The code uses a custom `useData` hook with the `csv` function to load and parse the dataset, coordinating menu selections with axis labels and data values.

Jjbruzzo

92% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris Dataset, allowing viewers to explore relationships between different floral measurements by selecting which attributes to plot on the X and Y axes through two dropdown menus. Built with React and D3 v5, it uses the `scaleLinear` API to map data to SVG coordinates, with custom `AxisBottom`, `AxisLeft`, and `Marks` components rendering the axes and circle glyphs. The visualization updates dynamically when menu selections change, and each data point includes a native SVG tooltip showing its value.

Jj-PGi

92% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between different flower measurements by selecting which attributes appear on the x and y axes via two dropdown menus. The visualization is built using React with D3.js v6, rendering SVG circles with tooltips that show precise values on hover. The code uses D3's `scaleLinear`, `extent`, and `format` functions for axis scaling and tick formatting, while the custom `AxisBottom`, `AxisLeft`, `Marks`, and `Dropdown` components demonstrate a modular approach to building interactive charts within a React framework.

CCodeDuckie99

92% match