Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published0🌍 Public
Aavolisacado
Last edited Jun 23, 2019
Created on Jun 23, 2019

This interactive scatter plot explores the Auto MPG dataset from the UCI Machine Learning Repository. Dropdown menus let the user dynamically choose which car attributes map to the x-axis, y-axis, and color categories, using `dropdownMenu` to re-render the visualization. Built with D3 v5, the `scatterPlot` module animates circles to their new positions over a two-second transition, scaling axes with `d3.scaleLinear` and `d3.axisLeft`/`d3.axisBottom`, while a separate `colorLegend` displays the categorical color scale.

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 compare any two numeric car attributes. Dropdown menus built with a custom `dropdownMenu` module let viewers select which columns map to the X and Y axes. The visualization uses d3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while circles transition smoothly to new positions over two seconds using `transition().duration(2000)`. SVG rendering and animated updates are driven by a reusable `scatterPlot` function.

AAbishek-Dulal
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 to map to the X and Y axes using dropdown menus, with the chart animating transitions between selections. Built with D3 v5, the visualization uses `d3.csv` for data loading, `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for ticks, and SVG rendering. The custom `dropdownMenu` component handles menu creation, while the scatter plot animates circle positions over two seconds.

AAlain Jennotte
97% 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. Two dropdown menus let users select which columns map to the X and Y axes, with axes, labels, and points updating accordingly. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `select` APIs, along with a reusable `dropdownMenu` component. Points animate via `transition().duration(2000)` with staggered delays, rendered as semi-transparent red SVG circles with grid lines.

Eeherchen
96% 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
96% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores the Auto MPG dataset from the UCI Machine Learning Repository, allowing users to select which variables appear on the X and Y axes via custom dropdown menus built with the `dropdownMenu` function. The main visualization uses d3’s `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while circles are animated into position using `transition().duration(2000)`. When the user changes a menu selection, the chart re-renders smoothly with updated scales and labels.

KKarthik Kunala Venu
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 different car attributes. Dropdown menus let users select which columns map to the X and Y axes, updating the visualization dynamically. Built with D3 v5, the code uses d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for tick marks, and a custom dropdownMenu component with animated circle transitions via d3.transition over a 2-second duration. Each data point appears as a red circle at 10-pixel radius, with SVG rendering and axis labels.

CChenluWang96
96% match
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
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 car attributes. Users select which columns map to the X and Y axes via dropdown menus built with a reusable `dropdownMenu` function. The visualization uses D3 v5 scales (`scaleLinear`), axes (`axisBottom`, `axisLeft`), and SVG transitions that animate circles into position over two seconds. Axis labels update dynamically, and the dataset includes numeric columns like mpg, cylinders, displacement, horsepower, weight, acceleration, and year.

Nnreddystudent
96% match