Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Menus

✓ Published1🌍 Public
HHaileabGH
Last edited Dec 10, 2021
Created on Dec 9, 2021

This interactive scatter plot lets viewers explore the relationship between different attributes of cars from the classic Auto MPG dataset by selecting which columns map to the X and Y axes via dropdown menus. The visualization uses D3.js (version 5) to render circles with animated transitions, scaling each axis with `d3.scaleLinear` and adding axes via `d3.axisBottom` and `d3.axisLeft`. The user can compare variables such as miles per gallon, horsepower, and weight.

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…

Fork of Scatter Plot with Menus

This interactive scatter plot from the Auto MPG dataset lets users explore relationships between car attributes by selecting X and Y axes from dropdown menus. Built with D3 v5, it uses `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for ticks. Circles animate from the center using `transition().duration(2000)` when data changes. The data comes from UCI’s Machine Learning Repository, and the visual encoding uses SVG circles with opacity.

JJuliaHsu
94% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays automotive data from the UCI Machine Learning Repository’s Auto MPG dataset, letting users choose which columns to map to the X and Y axes via dropdown menus. Built with D3 v5, the visualization uses `scaleLinear` for axes and animates circles with a 2-second transition when selections change. The chart includes axis labels and grid lines, rendered as SVG with opacity-styled red circles. Updates trigger a re-render that re-binds data and transitions circle positions, demonstrating dynamic visualization of multivariate car attributes like horsepower, weight, and acceleration.

Kkzaiets
94% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot explores the relationships between attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. The user can dynamically reassign which numeric column maps to the x- and y-axes via custom dropdown menus. The visualization is built with D3 v5, using `csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft`. SVG circles animate into position with `transition().duration(2000)`. Axis labels and menu text are styled as large, clickable HTML controls.

Nnikki81140
94% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot explores the relationships between numeric attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. Dropdown menus let users select which columns to assign to the X and Y axes, with axis labels updating to reflect the chosen variables. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` to render scales and axes, while `transition().delay()` animates the points into their new positions. The SVG rendering uses semi-transparent red circles to show overlapping data points.

Nnikki81140
94% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, letting viewers explore relationships between numerical attributes. Users select which columns map to the X and Y axes from dropdown menus. The visualization is built with D3 v5, using `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration()` to animate circles to their new positions when axes change. Data is loaded via `csv`, and the implementation uses an SVG rendering approach with reusable menu and scatter plot components.

Jjt23346059@gmail.com
94% match
Loading thumbnail…

Fork of 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. Users select which columns to map to the X and Y axes via dropdown menus built with the custom `dropdownMenu` function. The visualization uses d3.v5 with `scaleLinear`, `axisBottom`, and `axisLeft`, rendering SVG circles with animated transitions (`transition().duration(2000)`) that move points to their new positions when axes change.

HHaochen-Luo
94% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This visualization presents a scatter plot of the Auto MPG dataset, allowing users to interactively select which data columns map to the X and Y axes through dropdown menus. Rendered using D3.js (v5) with SVG and animation, the plot encodes car characteristics like horsepower, weight, and acceleration. The code implements a reusable `dropdownMenu` component and a `scatterPlot` module that leverages `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration()` for animated point movement. Data is loaded as CSV from the UCI Machine Learning Repository.

PPenguin-jpg
94% match
Loading thumbnail…

Fork of Fork of Fork of Scatter Plot with Menus

This interactive scatter plot visualizes automobile data from the UCI Auto MPG dataset, allowing users to explore relationships between attributes like horsepower, weight, and acceleration. Two dropdown menus let viewers select which columns map to the X and Y axes. The visualization uses d3.csv to load data, d3.scaleLinear and d3.extent for scaling, and d3.axisLeft and d3.axisBottom for axes. Points animate into position using d3 transitions, with SVG circles rendered at 10px radius and opacity 0.3.

HHaileabGH
94% match