Reusable Scatter Plot with Menus

100%

Reusable Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Jul 20, 2023

Created on Jul 17, 2023

This example shows an interactive scatter plot of automotive data from the auto-mpg CSV file, with dropdown menus that let the user switch which columns appear on the x- and y-axes. The plot uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` to build axes, while circles drawn in SVG animate into position via a chained `transition().duration(2000).delay()`. The dropdown options are generated by a custom ES6 module, `dropdownMenu`, imported alongside the reusable `scatterPlot` module that handles rendering.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with menus

This example presents an interactive scatter plot of automotive data from the auto-mpg dataset, where users select which columns to display on the x- and y-axes via dropdown menus. Two menus are rendered using the custom `dropdownMenu` module, and the scatter plot is built with D3 v5, using `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes. Each data point is an SVG circle that animates into place with a 2-second transition, using `transition.attrTween`-like behavior through `transition().duration()`, with opacity set via CSS.

NNaveenaS12

92% match

Loading thumbnail…

Scatterplot with Menus

An interactive scatterplot displaying the auto-mpg dataset, with dropdown menus that let the user select which data columns to plot on the x and y axes. The visualization updates smoothly with a staggered transition, animating each circle from the center to its new position. The code uses D3 v5's `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` functions, along with a custom `dropdownMenu` component that binds options to menu elements. SVG rendering handles the plot, with axis labels and gridlines styled via CSS.

Ccornshoots

91% match

Loading thumbnail…

Scatter Plot with Menus

This example shows an interactive scatter plot of the auto-mpg dataset, where dropdown menus let the user select which columns to display on the x- and y-axes. As the selection changes, the plot’s axes and data points animate to their new positions with a smooth transition. The visualization is built using the D3.js library (v5), leveraging its `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` APIs, with circles rendered as SVG elements. The dropdown menus are created dynamically via a custom component that generates HTML `<select>` elements, and the plot updates instantly upon user input.

Iianleekq

91% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore the relationship between any two columns of the automotive dataset by selecting axes from dropdown menus. Built with D3 v5, it renders SVG circles that animate from the center to their positions using `transition()`. The code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, with data loaded from a CSV file. The dropdown menus are generated using a reusable `dropdownMenu` component that binds options to a native `<select>` element.

Aannadehtiarova

91% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the auto-mpg dataset, with dropdown menus allowing viewers to select which numerical columns appear on the x- and y-axes. Built with D3 v5, it uses scales, axes, and SVG circles to render the data, while a custom `dropdownMenu` module and D3’s `transition` animate points to new positions over two seconds when the axis selections change. The scatter plot code reuses `axisBottom`, `axisLeft`, and `scaleLinear` for the chart structure.

Ffahmijaafar

91% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses dropdown menus to let users choose which columns of the auto-mpg dataset appear on the x- and y-axes. The code employs d3.scaleLinear, d3.axisBottom, and d3.axisLeft, with a custom dropdownMenu component that updates the chart on selection changes. Circles transition with a staggered delay of 2 seconds each time the axes change, rendered as SVG elements with a red, semi-transparent fill.

Ssakhabutdinov

91% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from a CSV file, with two dropdown menus letting users choose which columns to plot on the x- and y-axes. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.extent to compute scales, and d3.axisBottom and d3.axisLeft for the axes. Changes trigger a transition with d3.transition, animating the circles’ positions over 1.2 seconds. Menus are built with a custom reusable dropdownMenu function, and the plot renders as SVG with 10-pixel-radius red semi-transparent circles.

HHasideluxe

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

90% match