Skip to main content
SimilarExport ZIP
100%

[SR] Scatter Plot with Menu

✓ Published0🌍 Public
Ssuserocc
Last edited Mar 2, 2021
Created on Mar 2, 2021

This scatter plot visualizes the Iris dataset, allowing users to change the x-axis attribute via a dropdown menu. The y-axis is fixed to sepal width. The visualization is built with React and D3 v6, using `scaleLinear` for axes and rendering circles as SVG marks. Data is loaded from a CSV file using D3's `csv` function. The interface includes a select element to switch among the dataset's attributes, demonstrating adaptive visual encoding.

AI-generated description

Smiley face implementation with React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with menus

A scatter plot of the Iris dataset with dropdown menus for selecting which measured attribute appears on the x- and y-axes. The visualization renders as an SVG using React components, with D3 providing the linear scales, axis generation, and CSV data loading. Users can switch among sepal length, sepal width, petal length, petal width, and species for each axis, which updates the scales, axis labels, and plotted circles. Tooltips show tick values on hover.

SSushan Prajapati
93% 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
93% 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
92% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, featuring dropdown menus that let viewers select which numerical attributes to display on the x and y axes. The visualization renders data points as SVG circles using React components, with axes generated from D3 scales (scaleLinear) and tick formatting via the format function. Users can compare any combination of sepal and petal measurements, with axis labels updating dynamically to reflect the current selection. The chart loads CSV data asynchronously using D3’s csv parser, and menu interactions update state through React’s useState hook.

Vvesnaj
92% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, enabling exploration of relationships between sepal and petal measurements. Users can dynamically select which numerical attribute to display on each axis via dropdown menus, with the plot updating instantly. The visualization is built using React and D3 v7, rendering SVG circles and axes. The `scaleLinear`, `extent`, `csv`, and `format` D3 functions are used for data loading, scaling, and tick formatting, while React `useState` manages the selected attributes.

SSong Tao Chen
92% match
Loading thumbnail…

ScatterPlot with Menu

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.

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