Skip to main content
SimilarExport ZIP
100%

[SR] next try: Scatter Plot with Menu

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

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements to plot on the x and y axes via two dropdown menus. The visualization uses React for the user interface and D3.js for rendering the SVG elements, including axes, data points, and a color legend. By hovering over the legend, the plot highlights data points of a selected species while dimming others. The chart's data is loaded asynchronously from a CSV file using D3's `csv` function.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

[SR] Scatter Plot with Menu

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.

Ssuserocc
92% 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
90% match
Loading thumbnail…

Scatter plot with menu

This interactive scatter plot displays the Iris dataset, allowing viewers to select which floral measurements appear on the x- and y-axes via two dropdown menus. Built with React and D3 v7, the visualization renders points as SVG circles, with axes generated from d3.scaleLinear and extent functions. The code uses d3.csv for data loading and React's useState hook to manage attribute selections, while Bootstrap styles the menu controls.

GGabriel
90% match
Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements appear on the x- and y-axes via React dropdown menus. The SVG chart renders circles for each sample, with axes and labels generated using D3 scales and tick formatting. React state management refreshes the visualization when menu selections change, while D3’s `csv` loader parses the data and `scaleLinear` maps values to coordinates.

SShanmukh
90% match
Loading thumbnail…

scatter plot with menus

An interactive scatter plot of the Iris dataset allows users to select which flower measurements appear on the x- and y-axes via dropdown menus. Built with React and D3 v5, it renders points as SVG circles, with axes labeled according to the chosen attributes. D3’s `scaleLinear`, `extent`, and `csv` functions handle data loading and scaling, while React’s `useState` manages the selected dimensions. The plot’s axes are generated through custom React components, and hovering reveals exact values via SVG `<title>` tooltips.

DDanier
90% match
Loading thumbnail…

Scatterplot V2 w/ menus

This interactive scatterplot visualizes the Iris dataset, allowing users to dynamically select which flower measurements appear on the x- and y-axes via dropdown menus. The chart renders as an SVG using React, with axes generated through custom components and scales from d3-scale. Dropdown menus are implemented with ReactDropdown and d3.csv loads the data. Axis labels update automatically to reflect selected attributes, and each data point includes a native SVG tooltip showing its x-value.

SSophia Cofone
90% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, displaying measurements for three flower species. Two dropdown menus let users independently select which attributes to plot on the X and Y axes. Built with React and D3, the visualization uses `scaleLinear` for axes and SVG circles for data points. Hovering reveals tooltips with formatted values. The React app manages state for axis selections and loads CSV data via D3's `csv` function, rendering axes and marks as React components with D3 scales.

RRay Yang
90% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements appear on the x and y axes via dropdown menus. The plot uses React dropdowns to control the axes, with d3.scaleLinear for positioning and d3.scaleOrdinal for species-based coloring. Hovering over the color legend highlights points of a selected species, using React’s useState to manage the hovered value, while SVG circles render each data point with tooltips.

CCatalina Vajiac
90% match