Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published0🌍 Public
Wwangqin2215
Last edited May 23, 2019
Created on May 23, 2019

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.

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 visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between car attributes such as horsepower, weight, and acceleration. Dropdown menus let users dynamically select which columns map to the X and Y axes, with the chart automatically transitioning between configurations. Built with d3.v5, the visualization uses d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.transition to render SVG circles and animate their positions over 2 seconds when axes change.

MMichał Szumnarski
97% 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
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 visualizes the Auto MPG dataset from the UCI Machine Learning Repository, allowing users to explore relationships between car attributes such as horsepower, weight, and acceleration. Two dropdown menus let viewers select which data columns map to the X and Y axes, dynamically re-rendering the plot. The visualization uses D3 v5 with custom modules for the dropdown menus and scatter plot, employing D3's scaleLinear, extent, axisLeft, axisBottom, and transition features. Circles animate from the chart's center to their positions with staggered delays over two seconds, while SVG renders the axes, labels, and semi-transparent red data points.

SSchmittYannic
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 data columns map to the X and Y axes, with d3.v5 handling the dynamic re-rendering. The visualization uses d3.scaleLinear for axis scales, d3.axisBottom and d3.axisLeft for tick marks, and animated SVG circle transitions to update positions smoothly.

AAziz Jaffrey
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 such as horsepower, weight, and acceleration. Users select which columns to plot on the X and Y axes using dropdown menus, with the chart animating points to their new positions over two seconds. The visualization uses d3.csv for data loading, d3.scaleLinear for axis scaling, and d3.axisLeft and d3.axisBottom for rendering axes. Custom dropdown menu and scatter plot modules manage user interactions and SVG rendering with animated transitions.

LLakshmi9666
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses the Auto MPG dataset from the UCI Machine Learning Repository to visualize relationships between car attributes like horsepower, weight, and acceleration. Users select which columns to plot on the X and Y axes via dropdown menus, and the chart updates accordingly. The visualization is built with D3 v5, using `select` and `scaleLinear` for axes, SVG circles for data points, and a custom `dropdownMenu` component. Points animate to new positions over two seconds when the axis selection changes.

JJovenne Naldrey Sapuay
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
97% match