Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published1🌍 Public
MMyCode
Last edited Apr 15, 2019
Created on Apr 15, 2019

This interactive scatter plot uses D3 v5 to visualize the Auto MPG dataset from the UCI Machine Learning Repository. Two dropdown menus allow users to select which numeric columns map to the X and Y axes, with the plot updating through D3’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs. SVG circles represent individual cars, animating to their new positions over two seconds via `transition().duration(2000)` and staggered delays. The code demonstrates reusable functions for the dropdown menu and the scatter plot, with axis labels dynamically reflecting the selected columns.

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 displays car data from the UCI Machine Learning Repository Auto MPG dataset. Dropdown menus let users choose which numeric columns map to the X and Y axes, with the plot updating through animated transitions. Built with D3 v5, the visualization uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while a custom `dropdownMenu` module handles the selection controls. SVG circles render with opacity, and the code leverages `transition().duration()` and `.delay()` to animate points as the selected variables change.

Cceltic660
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores the Auto MPG dataset from the UCI Machine Learning Repository. Two dropdown menus let users select which numeric columns to map to the x- and y-axes, updating the visualization with an animated transition. Built with D3 v5, the chart uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes and gridlines, while SVG circles animate into position via `transition().delay()`. The menus are constructed with a reusable `dropdownMenu` function that binds `option` elements to column names.

Jjesramyep1263
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot from D3 v5 visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as red circles. Dropdown menus let the user choose which numeric columns map to the X and Y axes. The code builds the scatter plot using `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function. Animated transitions, created with `transition().duration(2000).delay()`, smoothly move points between positions when the axis selection changes.

Ssunole896@yahoo.com
97% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying cars' attributes as circles. Dropdown menus let users select which data columns map to the X and Y axes, dynamically updating the chart. The code uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `dropdownMenu` custom component. Animated transitions, via `transition().duration(5000)`, move circles to new positions, while SVG renders the axes, labels, and semi-transparent red points.

Llystran
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset. Users control which columns map to the X and Y axes through dropdown menus, with animated transitions moving circles to their new positions over two seconds. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().delay()` to render the SVG, while `dropdownMenu` handles the interactive selections.

Ssourcebox-bug
97% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset. Using dropdown menus, users select which columns map to the X and Y axes, with the chart updating dynamically. The D3 v5 code uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom `dropdownMenu` component. SVG circles animate via `transition().duration(2000).delay()`, while axis labels and gridlines render from selected attributes like horsepower or weight.

Jjons288
97% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays car data from the UCI Machine Learning Repository’s Auto MPG dataset, with dropdown menus letting users select which columns map to the X and Y axes. The visualization uses D3 v5 to render SVG circles with animated transitions, scaling axes via `scaleLinear` and updating axes with `axisBottom` and `axisLeft`. The menus are built using a reusable `dropdownMenu` function, while the plot itself updates smoothly thanks to `transition().duration(1000)` on circle positions.

Mmahaghpanah
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes automobile data from the UCI Machine Learning Repository's Auto MPG dataset, allowing users to explore relationships between numeric columns. Two dropdown menus let viewers dynamically select which columns map to the x and y axes. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` for axes, while circles animate their positions over two seconds with a staggered delay when data changes. SVG rendering displays red, semi-transparent points, and the code demonstrates reusable modules for the scatter plot and dropdown menu logic.

Llubin-liu
97% match