Example

100%

✓ Published0🌍 Public

Last edited Apr 8, 2020

Created on Apr 7, 2020

A scatter plot displays the relationship between two selectable attributes of a dataset, with red semi-transparent circles animating from the center to their scaled positions. Two dropdown menus, built with a reusable `dropdownMenu` module, allow users to choose which columns map to the x- and y-axes. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `transition.attr` to update axes and points with a staggered delay. SVG rendering with CSS-styled ticks and labels completes the interactive visualization.

AI-generated description

This plot is about menus

MIT Licensed

Similar vizzes

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

85% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot from the D3 example gallery uses two dropdown menus to let the viewer choose which data columns from the auto-mpg CSV dataset appear on the x- and y-axes. The visualization is rendered as an SVG, with circles animating into place over two seconds via D3's `.transition()` method. The code leverages the `d3.scaleLinear` and `d3.extent` functions to compute scales, and `d3.axisBottom` and `d3.axisLeft` to draw the axes with tick marks.

TToooooooT

84% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore the relationship between any two numeric columns from a dataset of car characteristics by selecting columns from dropdown menus for the x- and y-axes. The visualization renders 398 data points as semi-transparent red circles, which animate from the center of the chart to their positions upon selection change. The example uses D3 v5’s `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to build the plot, with custom reusable functions `dropdownMenu` and `scatterPlot` managing menu interactions and chart updates. Data is loaded from a CSV file via `d3.csv`.

KKazushige Okuma

84% match

Loading thumbnail…

Scatter plot with menus

A scatter plot displays the relationship between two numeric attributes from a dataset of 1970s cars, encoded as circles positioned by linear scales. Two dropdown menus let viewers switch which columns appear on the x- and y-axes, triggering a smooth animated transition of all points via `d3.transition`. The visualization uses D3 v5 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `extent`, rendering as SVG with interactive menus built through a reusable `dropdownMenu` module.

Aarieltonglet

84% match

Loading thumbnail…

Scatter Plot with Menus

Two dropdown menus let viewers select which columns of a dataset appear on the x- and y-axes of a scatter plot. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` functions to map numeric values, while a custom `dropdownMenu` module builds the `<select>` elements. Circles animate into position with `transition().duration(2000)` and a staggered delay, and the data comes from a CSV file containing movie attributes like budget, gross, and IMDb score.

LLiuXiangYuan

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

83% match

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays relationships between pairs of attributes from the auto-mpg dataset, with dropdown menus letting users choose which columns to plot on the x and y axes. The visualization uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and d3.transition to animate circles from the center to their positions over two seconds. Data is loaded via d3.csv, and the custom dropdownMenu module handles the menu selection logic. The SVG rendering includes grid lines via tickSize and axis labels that update dynamically with each selection.

Pprincit

83% match

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

82% match