Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published1🌍 Public
LLittledevil7
Last edited May 9, 2020
Created on May 9, 2020

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.

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

Mmeihaoming
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 interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between car attributes. Users can dynamically select which columns map to the X and Y axes through dropdown menus created with d3. The visualization uses d3.scaleLinear, d3.extent, axisLeft, and axisBottom to render the axes, while circles animate into position using transition().delay() and transition().duration() as data is re-plotted with different variables.

KKevinw97
96% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between car attributes. Users select which columns to plot on the X and Y axes via dropdown menus. The visualization uses d3.csv to load data, d3.scaleLinear for axes, and d3.axisBottom and d3.axisLeft for rendering. Circles are animated with transition().duration() and delay() to show the update when menu selections change. The SVG rendering includes axis labels and grid lines styled through CSS.

LLittledevil7
96% 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. Users select which columns to plot on the X and Y axes via dropdown menus. The visualization is built with D3 v5, using `scaleLinear`, `axisLeft`, and `axisBottom` for axes, while `transition().duration()` animates circle positions when the data mapping changes. The SVG rendering includes axis labels and semi-transparent red circles.

JJunyanL
96% 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
96% match
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
96% 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 scaled by linear axes. Two dropdown menus allow users to select which column maps to the x-axis and y-axis, dynamically updating the visualization on change. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while `select` and `transition().duration(2000).delay()` animate points moving between positions. The SVG rendering includes axis labels and tick marks styled via CSS.

LLudovicGouverneur
96% match