Scatter plot with menus

100%

Scatter plot with menus

✓ Published1🌍 Public

Last edited Oct 14, 2019

Created on Oct 2, 2019

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.

AI-generated description

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

93% match

Loading thumbnail…

Scatter Plot with Menus

This scatter plot lets users explore the relationship between pairs of numeric car attributes, choosing axes from dropdown menus built with the `dropdownMenu` function. Rendered as an SVG, the visualization updates via a unidirectional data flow, passing selected options from the menus to the `scatterPlot` component, which uses `scaleLinear`, `axisBottom`, and `axisLeft`. The 1970s–80s auto-mpg dataset is loaded with `d3.csv`. Circles animate from the center to their positions using a `transition`, with a duration and delay per point.

Zzhangfa

92% match

Loading thumbnail…

Scatterplot with menus

This interactive scatterplot lets users explore the relationships between different numeric attributes of cars from the auto-mpg dataset. Two dropdown menus, built with a reusable `dropdownMenu` function, allow selection of the variables plotted on the x and y axes. The chart itself is rendered by a custom `scatterplot` module using `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for the axes. Data updates trigger a smooth `transition` animation as circles move to their new positions over 500 milliseconds.

RRiccardo Pressiani

92% match

Loading thumbnail…

Scatter plot with menu

This interactive scatter plot displays the relationship between pairs of attributes from the auto-mpg dataset. Two dropdown menus let users select which columns to plot on the x- and y-axes. The visualization uses d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render axes, while circles transition to their new positions with a delay using d3.transition. The SVG updates dynamically as menu selections change, with the dropdownMenu component handling the user interaction.

MMauradion

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

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

91% match

Loading thumbnail…

Scatter plot with menus

A scatter plot with dropdown menus allows users to explore relationships between different columns of an automotive dataset. The plot visualizes the auto-mpg dataset loaded from a CSV file, with selectable X and Y axes. D3's `scaleLinear` and `extent` functions compute the axis scales, while `dropdownMenu` components built with D3's selection API manage axis column choices. The scatter plot uses SVG circles animated with a 2-second staggered transition, and axes are rendered using `axisBottom` and `axisLeft` with tick lines and labels.

MMatthiasVanCampen

91% match

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot explores relationships between attributes of classic automobiles, drawing from the auto-mpg dataset. Two dropdown menus allow users to select which columns appear on the x- and y-axes, triggering a smooth animated transition of the points. Built with D3 v5, the example uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes, while the points are animated using `.transition().duration().delay()`. The chart is rendered as SVG, with a reusable dropdown module and a separate scatterplot module handling the visualization logic.

JJoseph Popoola

91% match