Skip to main content
SimilarExport ZIP
100%

customized Scatter plot with menus

✓ Published0🌍 Public
Rrsulli4
Last edited May 1, 2023
Created on May 1, 2023

Two dropdown menus allow the viewer to select which airplane attributes to plot on the x and y axes. The interactive scatter plot uses a dataset of airplanes, showing each plane as a circle with a tooltip displaying its x-axis value. Built with React and D3 v5, the code uses `scaleLinear`, `extent`, and `csv` for data processing, while the custom `Dropdown` component and `Marks` map the selected attributes to the axes and circles within an SVG canvas.

AI-generated description

a scatterplot of the airplane dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot lets users explore the auto-mpg dataset by selecting which numeric columns to display on the x- and y-axes via two dropdown menus. Built with React and D3 v5, it uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while a custom `dropdownMenu` component handles the select elements. Circles animate into position over two seconds with a staggered delay, and axis labels update to reflect the chosen variables.

Iianjwo
83% match
Loading thumbnail…

Scatter plot with menus

Two dropdown menus let viewers choose which Iris flower measurements appear on the x and y axes of an SVG scatter plot. The React app loads the Iris dataset via `d3.csv` and uses `d3.scaleLinear` and `d3.extent` to set domains, while custom React components render axes and circles. As the menu selections change, the axes rescale and the scatter plot updates with the newly selected attributes, using `d3.format` for tick labels.

DDaniel Zsido
83% match
Loading thumbnail…

Scatterplot with Menus

This interactive scatterplot lets users explore the relationship between any two columns in the auto-mpg dataset by selecting the X and Y axes from dropdown menus. Built with React and D3 v6, it renders an SVG featuring animated transitions between selections, with circles smoothly adjusting to new positions. The example demonstrates reusable components for dropdown menus and scatter plots, utilizing D3’s scaleLinear, extent, axisBottom, and axisLeft APIs alongside the transition system for animation.

MMatthew Rubino
83% match
Loading thumbnail…

Refactored ScatterPlot with Menu

This interactive scatterplot displays the Iris dataset, allowing users to select which quantitative attributes appear on the x- and y-axes via two dropdown menus. Built with React and D3 v6, it renders SVG circles positioned by `scaleLinear` scales. The code uses `d3.csv` for data loading and custom React components for the axes and marks, with dropdown selection triggering state-based updates to the visualization.

PPadoSensei
83% match
Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays the Iris dataset, allowing users to select which measurements appear on the x- and y-axes using two React dropdown menus. The visualization uses React state to manage the selected attributes, and D3 v5 functions like `scaleLinear` and `extent` to compute scales from the CSV data. The SVG rendering includes custom React components for the axes, marks, and dropdowns, with circular points colored in teal that include native tooltips showing formatted values.

Ddumbdataguy@gmail.com
83% match
Loading thumbnail…

scatterplot with menues

This interactive scatterplot lets users explore the classic “Auto MPG” dataset by choosing which numeric columns appear on the x- and y-axes via two dropdown menus. Built with React, d3.v5, and SVG, it renders animated circles that transition to new positions when the selected columns change. The code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data, while a custom `dropdownMenu` component handles the select inputs and triggers re-renders through callbacks.

SSchmittYannic
83% match
Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays the Iris dataset, with dropdown menus allowing users to select which attributes appear on the x- and y-axes. Built with React and D3 v5, the visualization uses `scaleLinear` and `extent` to compute scales, mapping the chosen columns to positions of SVG circles. Axis components render ticks and labels, while the `Marks` component adds tooltips via SVG `<title>` elements. The data is loaded asynchronously from a CSV file using D3’s `csv` function.

SShuyu Zheng
82% match
Loading thumbnail…

Scatter plot with menus

This example presents a scatter plot of automobile data, where users actively select which numerical columns to display on the x- and y-axes via two interactive dropdown menus. The visualization updates dynamically, smoothly animating the repositioning of data points over a 1.5-second transition with a staggered delay, making comparisons between different attribute pairings intuitive. The implementation leverages D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render the chart, and it uses custom `dropdownMenu` and `scatterPlot` modules to manage the SVG interface. Data is loaded from a remote CSV file using `d3.csv`.

PPeter S
82% match