Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Sep 12, 2024

Created on Sep 12, 2024

This interactive scatter plot visualizes data from the Auto MPG data set, with dropdown menus allowing users to select which car attributes map to the X and Y axes. The visualization uses D3.js (v5) to render an SVG with animated circle transitions and axis updates when menu selections change. The dropdown menus are constructed using a reusable `dropdownMenu` function built on D3's selection API, while the scatter plot itself is created with the `scatterPlot` module using `scaleLinear` for scaling, `axisLeft` and `axisBottom` for axes, and `transition` for animated point movement.

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 visualization presents a scatter plot of the Auto MPG dataset, allowing users to interactively select which data columns map to the X and Y axes through dropdown menus. Rendered using D3.js (v5) with SVG and animation, the plot encodes car characteristics like horsepower, weight, and acceleration. The code implements a reusable `dropdownMenu` component and a `scatterPlot` module that leverages `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration()` for animated point movement. Data is loaded as CSV from the UCI Machine Learning Repository.

PPenguin-jpg

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as red, semi-transparent circles. Two dropdown menus let users dynamically select which data columns map to the X and Y axes. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct scaled axes, while circle positions transition over 2 seconds with staggered delays. The custom `dropdownMenu` utility manages the HTML select elements, and axis labels update to reflect the selected columns.

Jjt23346059@gmail.com

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. Dropdown menus let users select which car attributes map to the X and Y axes, with labels and tick marks updating accordingly. Data points appear with a staggered animation using D3 transitions. The visualization uses d3.scaleLinear, d3.axisLeft, d3.axisBottom, and a custom dropdownMenu module built with D3 selections and event handlers, rendering SVG elements with red, semi-transparent circles.

CCarolina Acosta Muñoz

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

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 via dropdown menus. The D3 v5 code uses `d3.csv` to load data and `d3.scaleLinear` with axis generators to render SVG axes and circles. The `dropdownMenu` module updates selections, while `scatterPlot` animates points using `transition().duration()` when axes change. The example demonstrates dynamic data-driven visualization with user-controlled encodings.

YYedrup

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

95% match

Loading thumbnail…

Fork of Scatter Plot with Menus

Two dropdown menus let the user select which columns of the Auto MPG dataset map to the X and Y axes of a scatter plot, with each point representing a car. As the selection changes, the axes, labels, and circles update with a smooth 2-second transition animation. The visualization is built with D3 v5, using `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for scales and axes, and a reusable `dropdownMenu` function to generate the HTML select elements. Data loads from a CSV file containing car specifications like horsepower, weight, and acceleration.

EEthan-Wu-juniper

95% match