Skip to main content
SimilarExport ZIP
100%

CPSC 436V Week 6 - Scatterplot with Menus

✓ Published1🌍 Public
JJordan Chiu
Last edited Feb 13, 2020
Created on Feb 13, 2020

This interactive scatterplot lets users explore the relationship between numeric car attributes (like horsepower and weight) from the auto-mpg dataset by using two dropdown menus to select which columns appear on the x- and y-axes. The visualization updates with animated transitions of the circles and axes using D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` APIs. The SVG rendering applies a 1000-millisecond staggered delay per point, with the plot drawn from the CPSC 436V course example.

AI-generated description

This bar chart shows data about cars.

MIT Licensed

Similar vizzes

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
91% 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 such as horsepower, weight, and acceleration. Two dropdown menus let users select which columns map to the X and Y axes, with the plot smoothly transitioning to show the new relationship. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, alongside SVG circles with animated transitions. The reusable `dropdownMenu` and `scatterPlot` modules handle updates, and the code leverages D3’s `csv` loading and data-binding patterns.

Cceltic660
90% match
Loading thumbnail…

Scatter Plot With Menus

This interactive scatter plot visualizes automobile performance data from the UCI Auto MPG dataset, letting users explore relationships between numeric attributes like horsepower, weight, and acceleration. Two dropdown menus dynamically select which columns appear on the x and y axes, triggering smooth animations as circles transition to their new positions over two seconds. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, while the custom `dropdownMenu` and `scatterPlot` modules handle the menu interactions and SVG rendering with `transition().duration(2000)`.

TThomas Seberechts
90% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes like horsepower and weight. Users dynamically reassign axes via dropdown menus, triggering a two-second animated transition where circles grow and reposition using D3’s `transition()` and `delay()`. Built with D3 v5, the SVG visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` for axes, with all numerical columns parsed from CSV. The example demonstrates reusable menu components and animated updates for exploring multivariate relationships.

AAjayyy
90% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores the Auto MPG dataset from the UCI Machine Learning Repository, visualizing relationships between car attributes such as horsepower, weight, and acceleration. Users select which numeric columns to plot on the x- and y-axes via two dropdown menus built with a reusable `dropdownMenu` function. The visualization is rendered using D3 v5 with SVG elements, and circles animate into position over two seconds when the selection changes. Axes are generated with `axisBottom` and `axisLeft`, with scales computed using `scaleLinear` and `extent`.

Kkaviya-ds
90% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore the relationship between any two numeric variables in the auto-mpg dataset through dropdown menus. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom` for scales and axes. Selecting a new column from either menu triggers a re-render that animates circles to their new positions using `transition().duration(2000).delay()`. Each circle represents a car, with red fill and partial opacity, plotted according to the chosen x and y axes. The data is loaded from a CSV file via `d3.csv`.

VVamsiYandapalli
90% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores relationships between attributes of classic cars, including horsepower, weight, and acceleration, using data from the auto-mpg dataset. Two dropdown menus allow the user to select which columns to plot on the x- and y-axes, dynamically re-rendering the chart. Built with d3.v5, the visualization uses SVG and animated transitions. The code leverages d3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, along with a custom `dropdownMenu` module and a `scatterPlot` component that animates circles over two seconds.

CCarloWK1202
90% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between car attributes like horsepower, weight, and acceleration. Users choose which columns to plot on the X and Y axes via dropdown menus built with a custom `dropdownMenu` function that creates HTML `<select>` elements. The visualization uses D3 version 5’s `scaleLinear`, `axisLeft`, and `axisBottom` for axes, and animates circles with `transition().duration(2000)` as they move to new positions when the menu selection changes.

Aab0343
89% match