scatterplot with menu

100%

scatterplot with menu

✓ Published1🌍 Public

Last edited Sep 16, 2021

Created on Sep 16, 2021

A scatterplot of the Iris flower dataset renders sepal and petal measurements as circles, with dropdown menus above the chart to select which numerical attribute appears on the x- and y-axes. The React app manages the selected attributes in state, and D3’s `scaleLinear`, `extent`, and `nice` compute the axes from the CSV data loaded via `d3.csv`. SVG circles and axis ticks are generated by React components, with hover tooltips supplied by SVG `<title>` elements.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to keep track of the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot with menu

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements (sepal length/width, petal length/width) appear on each axis via dropdown menus. The chart uses React state to track selected attributes, updating the axes and circles accordingly. Built with D3 scales (d3.scaleLinear, d3.extent) and custom SVG axis components, each data point renders as a circle with a tooltip showing its x-value. The CSV data loads asynchronously via d3.csv from a GitHub gist.

Ccshm407

95% match

Loading thumbnail…

scatterplot with menu and color

An interactive scatterplot of the Iris flower dataset visualizes correlations between sepal and petal measurements, with species distinguished by color. The visualization uses React state management in the main `App` component to control dropdown menus for selecting which measurement attributes appear on the x and y axes. D3 v7 utilities like `scaleLinear`, `scaleOrdinal`, and `extent` compute scales for the SVG rendering, while the data loads via the `csv` parser. The dropdown component allows users to switch between four numeric attributes, updating the axes and tick labels dynamically through React's `useState` hook.

Sseanowh

95% match

Loading thumbnail…

Scatter Plot with Menu

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus. Users select which attribute appears on each axis, and the SVG scatter plot updates the x and y scales accordingly. The visualization uses React hooks for state management, d3.scaleLinear for scaling, and d3.extent for domain calculations. Data is loaded asynchronously from a CSV file using d3.csv, with numeric values parsed on ingestion. The interface includes custom axis components with tick marks and axis labels.

SSam Hege

94% match

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus that select which attributes appear on the x and y axes. The visualization uses D3’s `scaleLinear` and `extent` functions to map data to SVG coordinates, while React manages component state and re-rendering when menu selections change. The data is loaded asynchronously via D3’s `csv` method, and circles represent individual flowers with tooltips showing the x-axis value.

MmohitPassan

94% match

Loading thumbnail…

scatterplot with menus

This interactive scatterplot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis via two dropdown menus. Built with React and D3 v7, the visualization uses `scaleLinear` and `extent` to compute scales, renders SVG circles for data points, and includes custom `AxisBottom` and `AxisLeft` components for tick marks and labels. The `useData` hook loads the CSV data with `d3.csv`, and the `Marks` component adds tooltip titles for each point.

BBlake McCarty

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

94% match

Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between four numeric measurements—sepal length, sepal width, petal length, and petal width—by selecting which attribute appears on each axis via two dropdown menus. The visualization renders data points as SVG circles, with scales created using d3.scaleLinear and extents computed via d3.extent. Axis components generate tick marks and labels, while React hooks manage the selected attributes and trigger re-renders upon menu changes. The data loads asynchronously from a CSV file using d3.csv.

KKolezhannochka

94% match

Loading thumbnail…

Scatter with menu viz

A scatterplot of the Iris dataset displays measurements of sepal and petal dimensions. A dropdown menu above the chart lets the user select which two attributes to plot on the X and Y axes, updating the scatterplot and axis labels accordingly. Built with React and D3 v5, the visualization uses `d3.scaleLinear`, `d3.extent`, and `d3.csv` to load and scale the data, with SVG circles rendered via React components.

YYohR

94% match