Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published1🌍 Public

Last edited Dec 3, 2018

Created on Dec 3, 2018

This scatter plot displays car data from the UCI Machine Learning Repository Auto MPG dataset, letting users select which columns to map to the X and Y axes via dropdown menus. The plot uses d3.csv to load data, d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom for scaling and axes, with SVG circles rendered at 10px radius. Menu interactions trigger transitions that animate each circle’s position over 2 seconds with staggered delays. Axes labels update dynamically based on the selected columns, and the visualization includes tick gridlines and rotated Y-axis text.

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 scatter plot displays car data from the UCI Machine Learning Repository’s Auto MPG dataset, with dropdown menus letting viewers assign any data column to the X or Y axes. The visualization uses d3.csv for loading, d3.scaleLinear, d3.extent, and d3.axisBottom/axisLeft for scales and axes, while d3.transition animates circles over two seconds when columns change. The code builds menus from data.columns and updates the SVG scatter plot dynamically.

Llubin-liu

98% match

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between car attributes. Users select which columns to plot on the X and Y axes via dropdown menus. The visualization uses d3.csv to load data, d3.scaleLinear for axes, and d3.axisBottom and d3.axisLeft for rendering. Circles are animated with transition().duration() and delay() to show the update when menu selections change. The SVG rendering includes axis labels and grid lines styled through CSS.

LLittledevil7

97% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays car data 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, and the visualization updates the axes and corresponding data points accordingly. The chart is rendered as an SVG using d3-scales with linear axes, and the menus are built with a reusable dropdownMenu module. The code uses d3’s selection, scaleLinear, extent, axisLeft, and axisBottom APIs, and it incorporates rotated tick labels for readability.

SShashwat Priyadarshi

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

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 select which columns map to the X and Y axes via two dropdown menus, built with a reusable `dropdownMenu` function. The plot uses D3 v5 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` for scaling and axes. Circles are rendered with SVG and animate into position via `transition().duration(2000)` with staggered delays, while axis labels reflect the current column selections.

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 scatter plot displays car data from the UCI Machine Learning Repository’s Auto MPG dataset. Two dropdown menus let the user select which columns map to the x- and y-axes. The visualization uses d3.csv to load data, d3.scaleLinear for axes, and d3.axisBottom/axisLeft with tick marks. It renders as an SVG with circles, and updates with a smooth transition that animates each point’s position over two seconds when the selected columns change.

Sshreyan2020

97% 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 numeric car attributes. Two dropdown menus let viewers select which columns map to the X and Y axes. The code uses d3.csv for data loading, d3.scaleLinear and d3.extent for scaling, and d3.axisBottom/axisLeft for axes. Circles render in SVG with a 2-second staggered transition using d3.transition().duration() and .delay(), redrawn dynamically as menu selections change.

Jjesramyep1263

97% match