Skip to main content
SimilarExport ZIP
100%

Fork of Scatterplot with menus

✓ Published0🌍 Public
SSwapna1915
Last edited Jul 17, 2023
Created on Jul 17, 2023

This interactive scatterplot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between car attributes like horsepower and weight. Users select different columns for both the x and y axes from dropdown menus, triggering animated transitions where circles move to new positions. The visualization uses d3.csv for data loading, d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, and d3.transition with delays to animate the scatterplot points rendered as SVG circles.

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…

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

Fork of Scatter plot with menus

This interactive scatterplot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between different car attributes. Users can choose which two numeric columns to compare using dropdown menus built with the custom `dropdownmenu` function. The D3 v5 code uses `scaleLinear`, `axisBottom`, and `axisLeft` to render the plot, with animated circle transitions via `transition().duration(1000)`. Data is loaded with `csv`, and all numeric fields are converted to numbers before plotting.

SSwapna1915
95% 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
95% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot visualizes car data from the UCI Machine Learning Repository's Auto MPG data set, displaying relationships between attributes such as horsepower, weight, and acceleration. Users select which columns map to the X and Y axes via dropdown menus, triggering a re-render of the visualization. The plot uses d3's `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` module with animated transitions via `transition().duration(2000)`. SVG circles represent individual cars, with axes and labels rendered using d3's `axisBottom` and `axisLeft` APIs.

EEthan-Wu-juniper
95% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot visualizes the Auto MPG data set from the UCI Machine Learning Repository, displaying relationships between car attributes such as horsepower, weight, and acceleration. Two dropdown menus let the user choose which columns map to the X and Y axes. The visualization is built with D3 v5, using `scaleLinear`, `axisLeft`, and `axisBottom` for axes and scales, with SVG circles that animate into position via `transition`. A custom `dropdownMenu` module reuses a select element for the interactive column selection.

Ttiffycshsf
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 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 Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository. Dropdown menus let users select which car attributes map to the X and Y axes, with labels and tick marks updating accordingly. Data points appear with a staggered animation using D3 transitions. The visualization uses d3.scaleLinear, d3.axisLeft, d3.axisBottom, and a custom dropdownMenu module built with D3 selections and event handlers, rendering SVG elements with red, semi-transparent circles.

CCarolina Acosta Muñoz
94% match