ScatterPlot with Menu

100%

ScatterPlot with Menu

✓ Published1🌍 Public

Last edited Mar 25, 2021

Created on Mar 25, 2021

An interactive scatterplot of the Iris dataset displays measurements of sepal width, sepal length, petal width, and petal length as points. Users select which measurements appear on the X and Y axes via two dropdown menus, with axis labels updating accordingly. Built with React and D3 v6, the visualization uses `d3.scaleLinear` for axes, `d3.extent` for domains, and renders SVG circles, lines, and text. Data is loaded from a CSV using `d3.csv`, and components for axes, marks, and dropdowns are modularized into separate React files.

AI-generated description

Scatterplot with Menu in React

MIT Licensed

Similar vizzes

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

96% match

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

96% match

Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot displays the Iris dataset, allowing exploration of relationships between sepal and petal measurements. Users select which attributes to plot on the x and y axes using dropdown menus, with axis labels updating to reflect the chosen variables. The visualization is built with React and rendered as SVG using d3.v7's scaleLinear function for coordinate mapping. The data is loaded from a CSV file using d3.csv, and the plot includes title formatting, axis ticks, and tooltips for data point inspection.

Jjackcaldwellnichols

96% 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. Two dropdown menus let viewers select which attributes appear on the x and y axes, dynamically updating the visualization. Built with React and D3 v5, the example uses `scaleLinear` for scaling, `extent` for domain calculation, and SVG circles for data points. The axes are custom React components that render tick marks and labels, while hover tooltips display formatted values via SVG `<title>` elements.

MMarat

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

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

95% match

Loading thumbnail…

ScatterPlot With Menus

This interactive scatter plot displays the Iris dataset, allowing users to dynamically select which sepal and petal measurements appear on the x- and y-axes through dropdown menus. Each flower’s measurements are plotted as SVG circles with tooltips showing their values. Built with React and D3 v5, the visualization uses d3.csv for data loading, d3.scaleLinear and d3.extent for scaling, and custom React components for axes and marks. The axis labels update to reflect the currently selected attributes.

PPedro Henrique Vanali

95% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting sepal and petal measurements against each other. Two dropdown menus allow users to select which measurement attributes appear on the x- and y-axes, with axis labels updating accordingly. The visualization uses React for component state and rendering, with d3-scale (scaleLinear) for positioning and d3.extent to compute domains. SVG circles represent data points with hover tooltips, while custom React components (AxisBottom, AxisLeft, and Dropdown) handle axes and menu interactions. Data loads asynchronously via d3.csv from a GitHub-hosted CSV file.

Llaplantalaplanta

95% match