Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Sep 25, 2022

Created on Sep 24, 2022

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.

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

95% match

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 Fork of Scatter Plot with Menus

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.

TTCSMFrogdance

94% match

Loading thumbnail…

Fork of Scatter Plot with Menus

A scatter plot displays car data from the UCI Auto MPG dataset, with dropdown menus letting users choose which numeric columns map to the X and Y axes. The visualization uses D3 v5 with `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, while a custom `dropdownMenu` component handles option selection. SVG circles render each data point with animated transitions via `transition().duration()` and staggered `delay()` per point, creating a cascading effect when the axis variables change.

Wwzhang88

94% 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 circles. Users can select which data columns map to the X and Y axes through two dropdown menus. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` APIs, with SVG rendering. Selecting a new column triggers an animated transition where circles move to their new positions over one second, using `transition().duration(1000).delay((d, i) => i * 10)` for a staggered effect. The plot is updated via a custom `dropdownMenu` module and `scatterPlot` function.

Ppplomith

94% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot explores the relationship between different attributes of cars from the UCI Auto MPG dataset. Using dropdown menus, the user can select any two data columns to map to the X and Y axes, with the visualization updating through animated transitions. The code utilizes d3.csv for data loading, d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, and a custom dropdownMenu module. Each data point is rendered as a semi-transparent red circle using SVG, with axis labels and gridlines visible.

IIsigned

94% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, with dropdown menus letting users choose which columns map to the x- and y-axes. The visualization uses D3 v5 to render SVG circles, with animated transitions repositioning points smoothly when axis selections change. The code leverages `d3.csv` for data loading, `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` for tick marks, and custom dropdown menu logic built with standard HTML `<select>` elements. Axis labels update dynamically to reflect the selected columns.

TTCSMFrogdance

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

94% match