Skip to main content
SimilarExport ZIP
100%

Scatter Plot with menus

✓ Published0🌍 Public
NNaveenaS12
Last edited Sep 7, 2020
Created on Aug 24, 2020

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.

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
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 scatter plot displays automobile data from the auto-mpg dataset, with dropdown menus allowing users to select which columns to plot on the x and y axes. The visualization updates dynamically, showing relationships like horsepower versus weight with animated circle transitions. Built with D3 v5, the menus use the custom `dropDownMenu` component with select elements, while the scatter plot leverages `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().duration()` for smooth updates. Data values are parsed as numbers before rendering with SVG circles.

Zzenoe
94% 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
93% 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
93% match
Loading thumbnail…

Scatter Plot with menus.js

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.

Dddperdue
93% 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
93% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, letting users compare any two numeric columns by selecting them from dropdown menus. The visualization updates with animated transitions as new axes and circles are chosen. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll` with data joins to render SVG elements, while custom dropdown menus trigger re-renders of the chart. The scatter plot includes labeled axes with grid lines and semi-transparent circles representing individual cars.

Aarths-glitch
93% match