Scatter Plot with Menus

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

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

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

Scatter Plot with Menus

Aarths-glitch

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, with dropdown menus allowing users to select which numeric columns appear on the x and y axes. Built with D3 v5, the visualization uses reusable functions for the scatter plot and dropdown menus, with SVG rendering and animated circle transitions. The axis labels update dynamically as selections change, and the plot encodes data points as semi-transparent red circles with a 2-second stagger animation.

Ssteveaigbe

Scatter Plot with Menus

This interactive scatter plot displays relationships between attributes of cars from the auto-mpg dataset, with dropdown menus allowing the user to select which columns appear on the x- and y-axes. The visualization updates smoothly with animated transitions, as circles grow from the center to their new positions when a menu selection changes. Built with D3 v5, the example uses reusable functions for the dropdown menus and scatter plot, leveraging d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft to render the SVG axes and data points.

YYedrup

Scatter Plot with Menus

This interactive scatter plot allows users to explore the relationships between different numeric attributes of cars from the auto-mpg dataset by selecting which columns appear on the x- and y-axes through dropdown menus. The visualization, built with D3 v5, uses scaleLinear, extent, axisBottom, and axisLeft to render the axes and data points as semi-transparent red circles. When a menu selection changes, the scatter plot updates, animating the circles to their new positions over two seconds using a transition with per-element delays.

Jjlspangl

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles positioned on x and y axes. Two dropdown menus allow users to select which data columns map to each axis, triggering a transition that animates the circles to their new positions. The visualization uses d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and d3.select for DOM manipulation. A custom dropdownMenu module handles the menus, while the scatterPlot module manages SVG rendering with transitions on circle positions.

BBrandon Lehr