Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published1🌍 Public

Last edited Jun 9, 2019

Created on Jun 9, 2019

This interactive scatter plot displays the Auto MPG dataset from the UCI Machine Learning Repository, letting users compare any two numeric car attributes (like horsepower, weight, or acceleration) by selecting columns via dropdown menus. Implemented with D3 v5, the visualization uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to build axes, while dropdown menus are created with a custom `dropdownMenu` function that appends `<select>` and `<option>` elements. Points animate into position with a 2-second transition, and the SVG rendering includes red semi-transparent circles.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set. The user can select which columns map to X and Y using dropdown menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

AAnne Kerr

100% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between car attributes like horsepower, weight, and acceleration. Users choose which columns to plot on the X and Y axes via dropdown menus built with a custom `dropdownMenu` function that creates HTML `<select>` elements. The visualization uses D3 version 5’s `scaleLinear`, `axisLeft`, and `axisBottom` for axes, and animates circles with `transition().duration(2000)` as they move to new positions when the menu selection changes.

Aab0343

98% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores the Auto MPG dataset from the UCI Machine Learning Repository, visualizing relationships between car attributes such as horsepower, weight, and acceleration. Users select which numeric columns to plot on the x- and y-axes via two dropdown menus built with a reusable `dropdownMenu` function. The visualization is rendered using D3 v5 with SVG elements, and circles animate into position over two seconds when the selection changes. Axes are generated with `axisBottom` and `axisLeft`, with scales computed using `scaleLinear` and `extent`.

Kkaviya-ds

97% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses the Auto MPG dataset from the UCI Machine Learning Repository to visualize relationships between car attributes like horsepower, weight, and acceleration. Users select which columns to plot on the X and Y axes via dropdown menus, and the chart updates accordingly. The visualization is built with D3 v5, using `select` and `scaleLinear` for axes, SVG circles for data points, and a custom `dropdownMenu` component. Points animate to new positions over two seconds when the axis selection changes.

JJovenne Naldrey Sapuay

97% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, allowing users to explore relationships between car attributes such as horsepower, weight, and acceleration. Two dropdown menus let viewers select which data columns map to the X and Y axes, dynamically re-rendering the plot. The visualization uses D3 v5 with custom modules for the dropdown menus and scatter plot, employing D3's scaleLinear, extent, axisLeft, axisBottom, and transition features. Circles animate from the chart's center to their positions with staggered delays over two seconds, while SVG renders the axes, labels, and semi-transparent red data points.

SSchmittYannic

97% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes such as horsepower, weight, and acceleration. Two dropdown menus let users select which columns map to the X and Y axes, with the plot transitioning smoothly when selections change. Built with D3 v5, the visualization uses d3.csv for data loading, d3.scaleLinear and d3.axisBottom/Left for scales and axes, and d3.transition for animated circle repositioning. Red semi-transparent circles render in SVG, with axis labels updating to reflect the chosen variables.

TThiago Carvalho

97% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between car attributes such as horsepower, weight, and acceleration. Dropdown menus let users dynamically select which columns map to the X and Y axes, with the chart automatically transitioning between configurations. Built with d3.v5, the visualization uses d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.transition to render SVG circles and animate their positions over 2 seconds when axes change.

MMichał Szumnarski

97% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between numeric car attributes such as weight, horsepower, and acceleration. Users adjust dropdown menus to select which columns map to the X and Y axes, and the scatter plot transitions with 2-second animations as new column pairings are selected. The visualization uses d3.v5 with SVG rendering, employing d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.transition to update circles, axis labels, and menu selections dynamically.

Rrlia0010

97% match