Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Feb 1, 2023

Created on Feb 1, 2023

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.

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

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

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

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

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 car attributes from the UCI Auto MPG dataset, with dropdown menus letting users choose which columns to map to the x- and y-axes. The visualization uses d3.scaleLinear and d3.axisBottom/axisLeft to render axes, while circles animate into position via d3 transitions. The code implements a custom dropdownMenu component and a scatterPlot function that updates axes and data points when menu selections change, rendering as SVG.

NNYCUBK201

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

94% match