Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Oct 9, 2020

Created on Oct 9, 2020

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.

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, 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

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

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

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

98% 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 car attributes such as horsepower, weight, and acceleration. Users select which columns to plot on the X and Y axes using dropdown menus, with the chart animating points to their new positions over two seconds. The visualization uses d3.csv for data loading, d3.scaleLinear for axis scaling, and d3.axisLeft and d3.axisBottom for rendering axes. Custom dropdown menu and scatter plot modules manage user interactions and SVG rendering with animated transitions.

LLakshmi9666

98% 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 smoothly transitioning to show the new relationship. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, alongside SVG circles with animated transitions. The reusable `dropdownMenu` and `scatterPlot` modules handle updates, and the code leverages D3’s `csv` loading and data-binding patterns.

Cceltic660

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 as circles. Users select which data columns map to the X and Y axes via two dropdown menus, triggering animated transitions of the circles to their new positions. The visualization uses d3.csv for data loading, d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and custom dropdown menu and scatter plot components. SVG rendering with d3 transitions animates the updates over two seconds.

NncjB

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

97% match