Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published0🌍 Public
Mmeihaoming
Last edited Nov 27, 2019
Created on Nov 26, 2019

This interactive scatter plot explores relationships between attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. Users select any two columns to map to the X and Y axes via dropdown menus, with the selected options driving d3.csv-loaded data through d3.scaleLinear, d3.axisBottom, and d3.axisLeft. The visualization renders as SVG circles that animate from the plot’s center to their positions using d3.transition with staggered delays. The reusable custom functions dropdownMenu and scatterPlot encapsulate the menu and chart logic, updating axes and labels dynamically.

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…

Scatter Plot with Menus

This interactive scatter plot explores the relationship between different attributes of cars from the UCI Auto MPG dataset. Two dropdown menus allow users to select which columns are mapped to the X and Y axes, with the points animating to their new positions. The visualization uses d3.scaleLinear, d3.extent, and d3.axisBottom and axisLeft to construct the plot, while a custom dropdownMenu function handles the selection interface. The scatter plot is rendered as SVG with a transition over two seconds.

AAna
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between various car attributes. Two dropdown menus allow users to select which columns map to the X and Y axes, dynamically updating the visualization. The code uses d3.csv for data loading, d3.scaleLinear for scaling, and d3.axisBottom and d3.axisLeft for axes. Each rendered circle fades in with a 2-second d3 transition animation, while the dropdown menu component is built as a reusable d3 selection pattern with event handling.

Eelevari123
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays relationships between attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which data columns map to the x and y axes via dropdown menus, triggering smooth circle transitions over two seconds. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.extent for scales, d3.axisLeft and axisBottom for axes, and d3.transition with a staggered delay for animations.

CCurran Kelleher
97% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot explores the relationship between different attributes of cars 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 custom D3 code that creates and updates `<select>` elements. The visualization itself uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to render axes and SVG circles, with a staggered `transition().delay()` animation that moves points from the center to their final positions over two seconds.

LLittledevil7
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between car attributes. Two dropdown menus allow users to select which columns map to the X and Y axes, enabling exploration of various attribute combinations. The visualization uses D3 v5 with `scaleLinear` scales, `axisBottom`, and `axisLeft` components to render the SVG chart. When menu selections change, the scatter plot updates with a staggered transition animation of circles using D3’s `.transition().duration(2000).delay()`.

Aases1996
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, allowing users to explore relationships between numeric car attributes. Two dropdown menus let viewers select which columns map to the X and Y axes. The code uses d3.csv for data loading, d3.scaleLinear and d3.extent for scaling, and d3.axisBottom/axisLeft for axes. Circles render in SVG with a 2-second staggered transition using d3.transition().duration() and .delay(), redrawn dynamically as menu selections change.

Jjesramyep1263
97% match
Loading thumbnail…

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, triggering animated transitions of the circles to their new positions. The visualization uses d3.csv for data loading, d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and custom dropdown menu and scatter plot components. SVG rendering with d3 transitions animates the updates over two seconds.

NncjB
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores relationships between numeric attributes of cars from the UCI Auto MPG dataset. Two dropdown menus let viewers select which columns to plot on the x and y axes, with options like horsepower, weight, and acceleration. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, and `transition().duration(2000)` to animate circles from the center to their positions. The `dropdownMenu` custom module handles the menu interactions, while the scatter plot is built as a reusable SVG component.

Mmeihaoming
96% match