Scatter Plot with Menus

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

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

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

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

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

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

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

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository. Two dropdown menus let the user select which numeric columns (such as horsepower, weight, or acceleration) map to the x- and y-axes. The code uses the d3.csv and d3.scaleLinear APIs for data loading and scaling, with d3.axisBottom and d3.axisLeft for axis rendering. Points animate into position via d3 transitions with staggered delays, and axis labels update to reflect the selected columns.

WW9183907