Untitled

100%

✓ Published0🌍 Public

Last edited Sep 28, 2023

Created on Sep 28, 2023

This animated scatter plot explores the relationships between various attributes of cars from the UCI Auto MPG dataset. Dropdown menus let users select different columns for the x- and y-axes, with circles animating from the center to their new positions over 2 seconds. Built with D3.js, it uses `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `transition().duration().delay()` for the animation effect. The visualization is rendered as an HTML page with Plotly’s `newPlot` for an initial static chart.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays relationships between numerical attributes of cars from the UCI Auto MPG dataset. Two dropdown menus let viewers select which columns appear on the x- and y-axes, with each selection triggering a smooth 2-second transition animation that moves the red semi-transparent circles to their new positions. The visualization uses D3 v5 with SVG rendering, including `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().duration().delay()` to update axes and points dynamically.

KKarkG

87% match

Loading thumbnail…

23 - scatta'plot w/ menus - dataviz 2018

This interactive scatter plot explores relationships among car attributes from the UCI Auto MPG dataset, with dropdown menus letting users choose which columns to plot on each axis. The visualization updates smoothly, animating circles to their new positions over a one-second transition with a staggered delay. Built with D3 v7, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and a custom dropdown menu module to handle selection changes. The SVG renders semi-transparent steelblue circles, while axis labels and tick styling are customized via CSS.

Zzach b.

87% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays relationships between attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which data columns map to the x and y axes via dropdown menus, triggering smooth circle transitions over two seconds. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.extent for scales, d3.axisLeft and axisBottom for axes, and d3.transition with a staggered delay for animations.

CCurran Kelleher

86% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot explores relationships between attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. Dropdown menus above the chart let the user select which columns map to the X and Y axes, triggering a re-render. The visualization uses D3 v5’s `csv` loader, `scaleLinear`, `axisLeft`, and `axisBottom` to draw axes and points as SVG circles. When axes change, circles animate from the center to their new positions over two seconds using `transition().duration(2000).delay()`.

LLiao-YuWei

86% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot explores the relationships between numeric attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. Dropdown menus let users select which columns to assign to the X and Y axes, with axis labels updating to reflect the chosen variables. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` to render scales and axes, while `transition().delay()` animates the points into their new positions. The SVG rendering uses semi-transparent red circles to show overlapping data points.

Nnikki81140

86% match

Loading thumbnail…

Scatter Plot with Menus

This scatter plot explores the relationship between different attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which columns to map to the X and Y axes via dropdown menus, built with custom D3 code that creates and updates `<select>` elements. The visualization itself uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to render axes and SVG circles, with a staggered `transition().delay()` animation that moves points from the center to their final positions over two seconds.

LLittledevil7

86% match

Loading thumbnail…

Cars Scatter Plot

This interactive scatter plot lets users explore the relationships between different attributes of cars from the auto-mpg dataset. Dropdown menus dynamically select which numeric columns are plotted on the x and y axes. The visualization uses D3’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to construct axes with gridlines, and `transition().duration(1000).delay()` animates circles to new positions when axes change. Data is loaded via `csv()`.

Ffloresh

86% match

Loading thumbnail…

Animated Cars Scatter Plot with Menus

This interactive scatter plot displays automobile performance data from the auto-mpg dataset, allowing users to compare any two numeric attributes through dropdown menus. The visualization animates circles transitioning between positions when different axes are selected, with each circle representing a vehicle. Built with D3 v5, the example uses scaleLinear and extent for axis scaling, axisLeft and axisBottom for gridlines, and transition().duration() with delay to animate the SVG circles. Two dropdown menus, created dynamically via a reusable dropdownMenu function, enable selection of x and y axis variables.

Vvic126

86% match