Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published0🌍 Public

Last edited May 21, 2020

Created on Feb 28, 2019

This interactive scatter plot explores the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes like horsepower and weight. Users dynamically reassign axes via dropdown menus, triggering a two-second animated transition where circles grow and reposition using D3’s `transition()` and `delay()`. Built with D3 v5, the SVG visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` for axes, with all numerical columns parsed from CSV. The example demonstrates reusable menu components and animated updates for exploring multivariate relationships.

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

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, allowing users to explore relationships between car attributes through dropdown menus. The menus let viewers dynamically select which columns map to the x- and y-axes, updating the visualization with an animated transition. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the axes, while `transition().duration()` and `delay()` animate the circles to their new positions. The SVG rendering includes axis labels and grid lines, with data parsed as numeric values for accurate scaling.

Llizziechoi121

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

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

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

96% 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 data columns map to the X and Y axes, with d3.v5 handling the dynamic re-rendering. The visualization uses d3.scaleLinear for axis scales, d3.axisBottom and d3.axisLeft for tick marks, and animated SVG circle transitions to update positions smoothly.

AAziz Jaffrey

96% match

Loading thumbnail…

Scatter Plot with Menus

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.

AAnne Kerr

96% match

Loading thumbnail…

Scatter Plot with Menus

AAnne Kerr

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

96% match