Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Scatter Plot with Menus

✓ Published0🌍 Public
TTCSMFrogdance
Last edited May 12, 2021
Created on May 12, 2021

This interactive scatter plot from the Auto MPG dataset lets users explore relationships between car attributes such as horsepower, weight, and acceleration. Two dropdown menus dynamically reassign the X and Y axes, triggering a new scatterPlot rendering with animated circle transitions. The code uses D3 v5 modules including `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration(2000).delay()`, alongside a custom `dropdownMenu` component. SVG circles transition from the center to their new positions, with axis labels updating to reflect selected columns.

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 scatter plot visualizes the Auto MPG data set from the UCI Machine Learning Repository, displaying relationships between car attributes such as horsepower, weight, and acceleration. Two dropdown menus let the user choose which columns map to the X and Y axes. The visualization is built with D3 v5, using `scaleLinear`, `axisLeft`, and `axisBottom` for axes and scales, with SVG circles that animate into position via `transition`. A custom `dropdownMenu` module reuses a select element for the interactive column selection.

Ttiffycshsf
95% match
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
95% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot displays the UCI Auto MPG dataset, showing relationships between car attributes such as horsepower, weight, and acceleration. Two dropdown menus let users select which columns map to the x- and y-axes, triggering a staggered 2-second animated transition where circles move to their new positions. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `selection.transition().delay()`, rendering as SVG with a custom `dropdownMenu` component for interactive control.

PPiotr Paszek
94% 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 such as horsepower, weight, and acceleration. Users select which columns to map to the X and Y axes via dropdown menus built with the custom `dropdownMenu` function. The visualization uses d3.v5 with `scaleLinear`, `axisBottom`, and `axisLeft`, rendering SVG circles with animated transitions (`transition().duration(2000)`) that move points to their new positions when axes change.

HHaochen-Luo
94% 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
94% match
Loading thumbnail…

Fork of Fork of Scatter Plot with Menus

This interactive scatter plot from a fork of a D3 v5 example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, with each point representing a car. Users select which numeric columns map to the x and y axes via two dropdown menus, built with a custom `dropdownMenu` function that manipulates HTML `select` elements. The `scatterPlot` module uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.extent` to render the SVG axes and circles, while `d3.transition` animates the points over two seconds whenever the axis selection changes.

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

Fork of Scatter Plot with Menus

This interactive scatter plot explores the UCI Auto MPG dataset, letting users dynamically choose which numeric columns (e.g., horsepower, weight, acceleration) map to the X and Y axes via dropdown menus. Built with d3.v5, it renders an SVG with animated circle transitions. The implementation uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` for scaling and axes, while a custom `dropdownMenu` module handles the select elements, updating the plot on change.

SSuzie1022susu
94% match