Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published1🌍 Public
Llonnylee1
Last edited Jun 6, 2019
Created on Jun 6, 2019

Interactive scatter plot of movie data from the UCI Machine Learning Repository's Auto MPG dataset, allowing users to select which columns map to the x and y axes through dropdown menus. Built with D3 v5, the visualization uses d3.scaleLinear, d3.extent, axisBottom, and axisLeft for axes, with SVG circles that animate via d3.transition when the data changes. Dropdowns are generated using a custom dropdownMenu function that binds to the select element's change event.

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 visualizes movie data from the UCI Machine Learning Repository’s Auto MPG Data Set, displaying points on SVG axes where users select X and Y columns via dropdown menus. The d3.v5 code uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for scaling and axes, while `transition().duration(2000)` animates circles from the center to their positions. The `dropdownMenu` module handles menu interactions, re-rendering the chart with `d3.csv` loaded data.

AAnthony Winstanley
96% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore car data from the UCI Machine Learning Repository's Auto MPG dataset. Two dropdown menus allow selection of which data columns map to the X and Y axes. Built with D3 v5, the visualization uses dropdownMenu to handle menu interactions and scatterPlot with scaleLinear, axisBottom, axisLeft, and transition delays to animate circles into position. The SVG rendering includes gridlines and axis labels.

Ssourcebox-bug
94% 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 positioned on x and y axes. Two dropdown menus allow users to select which data columns map to each axis, triggering a transition that animates the circles to their new positions. The visualization uses d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and d3.select for DOM manipulation. A custom dropdownMenu module handles the menus, while the scatterPlot module manages SVG rendering with transitions on circle positions.

BBrandon Lehr
94% 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 positioned on x and y axes. Two dropdown menus allow users to select which data columns map to each axis, triggering a transition that animates the circles to their new positions. The visualization uses d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and d3.select for DOM manipulation. A custom dropdownMenu module handles the menus, while the scatterPlot module manages SVG rendering with transitions on circle positions.

BBrandon Lehr
94% 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
94% 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
94% 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
94% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the UCI Machine Learning Repository Auto MPG dataset, with dropdown menus letting users select which columns map to the X and Y axes. The visualization uses d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render the axes, while the scatterPlot module animates circles with a transition that delays each point's arrival by 10 milliseconds. SVG rendering with semi-transparent red circles reveals data density, and the dropdownMenu component dynamically rebuilds options on each selection.

Nnicfavfar
94% match