Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published0🌍 Public
Mmeihaoming
Last edited Nov 27, 2019
Created on Nov 26, 2019
Forked from Cars Scatter Plot

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.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays relationships between attributes of cars from the UCI Auto MPG dataset. Two dropdown menus let users select which numeric columns to compare on the x- and y-axes, updating the visualization accordingly. Built with D3 v5, the code uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while circles transition smoothly to new positions via `transition().duration()`. The `dropdownMenu` module handles menu creation, and SVG provides the rendering canvas.

CCassie
97% 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
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 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
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores relationships between car attributes from the UCI Auto MPG dataset. Two dropdown menus let users select which numeric columns map to the X and Y axes, using a reusable `dropdownMenu` module. The `scatterPlot` module renders SVG circles with D3 scales and axes, animating points into place via `transition().duration(2000)` with staggered delays. Data is loaded with `d3.csv` and parsed as numbers before rendering.

Fftjyangf
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses D3.js to visualize the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between car attributes like horsepower, weight, and acceleration. Two dropdown menus allow users to select which columns map to the X and Y axes using the custom `dropdownMenu` function. The scatter plot renders as an SVG with animated transitions, using D3's `scaleLinear`, `axisLeft`, and `axisBottom` APIs to display axes and data points.

Wwangqin2215
97% 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 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
96% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays car data from the UCI Machine Learning Repository Auto MPG dataset. Dropdown menus let users choose which numeric columns map to the X and Y axes, with the plot updating through animated transitions. Built with D3 v5, the visualization uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while a custom `dropdownMenu` module handles the selection controls. SVG circles render with opacity, and the code leverages `transition().duration()` and `.delay()` to animate points as the selected variables change.

Cceltic660
96% match