Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Mar 12, 2021

Created on Mar 12, 2021

This interactive scatter plot from the Auto MPG dataset lets users explore relationships between car attributes by selecting X and Y axes from dropdown menus. Built with D3 v5, it uses `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for ticks. Circles animate from the center using `transition().duration(2000)` when data changes. The data comes from UCI’s Machine Learning Repository, and the visual encoding uses SVG circles with opacity.

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…

Fork of 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 by X and Y axes. Users select which columns map to each axis via dropdown menus, built with a reusable `dropdownMenu` function that populates `<select>` elements from data columns. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and grid lines, while circles transition smoothly with a 2000ms `transition().duration()`. Rendering uses SVG with animated circle placement based on the selected numeric columns.

Llrakla

96% match

Loading thumbnail…

Fork of 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, built with a reusable `dropdownMenu` function. The plot, rendered as SVG with D3 v5, uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes. Each circle animates into position using a `transition().duration(2000).delay()` sequence, with axis labels updating dynamically upon menu selection.

Ddanish-nix

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

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes automobile 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 built with a reusable `dropdownMenu` function. The visualization uses d3.v5’s `scaleLinear`, `axisBottom`, and `axisLeft` for axes, and renders SVG circles with a 2-second animated transition that staggers each point’s appearance. Attribute mappings update dynamically when menu selections change, leveraging D3’s data joins and the `transition().delay()` method.

Vvivianaaai@qq.com

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

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays automotive data from the UCI Machine Learning Repository’s Auto MPG dataset, letting users choose which columns to map to the X and Y axes via dropdown menus. Built with D3 v5, the visualization uses `scaleLinear` for axes and animates circles with a 2-second transition when selections change. The chart includes axis labels and grid lines, rendered as SVG with opacity-styled red circles. Updates trigger a re-render that re-binds data and transitions circle positions, demonstrating dynamic visualization of multivariate car attributes like horsepower, weight, and acceleration.

Kkzaiets

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot explores the relationships between attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. The user can dynamically reassign which numeric column maps to the x- and y-axes via custom dropdown menus. The visualization is built with D3 v5, using `csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft`. SVG circles animate into position with `transition().duration(2000)`. Axis labels and menu text are styled as large, clickable HTML controls.

Nnikki81140

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from UCI, letting users explore relationships between car attributes by selecting any two columns for the X and Y axes through drop-down menus. The scatter plot is built with D3 v5, using scaleLinear for axes and axisBottom/axisLeft for ticks. Circles are animated into place with a transition.delay effect. The dropdownMenu module creates the HTML select elements, and the chart updates its axes and labels when new mappings are selected.

AAbdouEnsaj

95% match