Scatter Plot with menus.js

100%

Scatter Plot with menus.js

✓ Published1🌍 Public

Last edited Mar 30, 2020

Created on Mar 26, 2020

This interactive scatter plot lets users explore the auto-mpg dataset by changing the x- and y-axis variables through dropdown menus. The visualization uses D3 v5 to render animated SVG circles that smoothly transition between selections, with scales, axes, and labels updating dynamically. The code implements custom `dropdownMenu` and `scatterPlot` modules, leveraging D3's `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` APIs, along with `transition` for the animated circle movement.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with menus.js

This interactive scatter plot from the auto-mpg dataset lets users explore relationships between numeric car attributes by switching the axes through dropdown menus. Built with D3 v5, it uses `d3.scaleLinear` and `d3.extent` for scales, with `d3.axisBottom` and `d3.axisLeft` for grid lines. A custom dropdownMenu module triggers re-rendering on selection, while transitions animate circles to their new positions using `transition.attr`. The SVG visualization includes styled labels and tick marks.

Ssunsun11166

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

94% match

Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot lets users explore the relationship between pairs of numeric variables from the auto-mpg dataset. Dropdown menus, built with a reusable `dropdownMenu` component, dynamically switch which columns are mapped to the x- and y-axes. The visualization, rendered as an SVG, uses D3 v5 APIs such as `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to compute scales and axes. When a new column is selected, the circles animate to their new positions over two seconds using a staged `.transition().duration(2000).delay(...)` chain.

Ggilbster

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

94% match

Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot displays relationships between numeric attributes of the auto-mpg dataset, with dropdown menus above the chart letting users select which columns to plot on the x and y axes. As selections change, the axes and data points update with a smooth 2-second animated transition, where circles grow from the center and slide to their new positions. The visualization uses D3 v5 with reusable functions for the dropdown menu and scatter plot, employing d3.scaleLinear, d3.extent, d3.axisBottom and d3.axisLeft for scales and axes, plus SVG rendering with a transition delay based on data index for the staggered animation effect.

RRoger Yu-Hsiang Lo

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

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

93% match

Loading thumbnail…

Scatterplot with Menus

This interactive scatterplot lets users explore relationships between variables in the auto-mpg dataset by selecting which columns to plot on the x- and y-axes via dropdown menus. The menus trigger re-renders that update the axes, labels, and animated circle positions. The visualization uses D3 v5 with the `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, and the dropdown menu component is a custom reusable module. SVG circles transition smoothly over 2 seconds when data changes.

Ffbudwill

93% match