Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public
Jjrj@es.aau.dk
Last edited Apr 28, 2024
Created on Apr 28, 2024

This scatter plot visualizes the Auto MPG data set from the UCI Machine Learning Repository, displaying car attributes as red semi-transparent circles. Users select which data columns map to the X and Y axes via dropdown menus, with the axes and labels updating accordingly. The code uses d3.csv for data loading, d3.scaleLinear for scales, d3.axisLeft and d3.axisBottom for axes, and a d3 transition with duration and delay to animate circles to their new positions. SVG elements are rendered and updated through a modular dropdownMenu and scatterPlot function pattern.

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 scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as red, semi-transparent circles. Two dropdown menus let the user select which data columns map to the X and Y axes. The visualization uses d3.csv for data loading, d3.scaleLinear for scales, d3.axisLeft and d3.axisBottom for axes, and animated d3 transitions to move circles to new positions when menu selections change.

LLingjie Yi
97% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as red, semi-transparent circles. Two dropdown menus let users dynamically select which data columns map to the X and Y axes. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct scaled axes, while circle positions transition over 2 seconds with staggered delays. The custom `dropdownMenu` utility manages the HTML select elements, and axis labels update to reflect the selected columns.

Jjt23346059@gmail.com
96% match
Loading thumbnail…

Fork of Scatter Plot with Menus2

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, allowing users to explore relationships between car attributes. Two dropdown menus let the user select which data columns map to the X and Y axes. The visualization uses d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for ticks, and scatterPlot.js renders circles with animated transitions on axis changes. SVG rendering with semi-transparent red circles reveals data density, while axis labels update dynamically to reflect selected columns.

Jjesramyep1263
96% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles. Users can select which data columns map to the X and Y axes through two dropdown menus. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` APIs, with SVG rendering. Selecting a new column triggers an animated transition where circles move to their new positions over one second, using `transition().duration(1000).delay((d, i) => i * 10)` for a staggered effect. The plot is updated via a custom `dropdownMenu` module and `scatterPlot` function.

Ppplomith
96% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset, with dropdown menus letting users choose which columns map to the X and Y axes. The visualization uses d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render the axes, while d3.transition animates circles moving to their new positions over two seconds. Data is loaded via d3.csv, and the interactive menus are built with native HTML select elements. The SVG rendering includes gridlines and axis labels that update dynamically.

RRikibens
96% 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 as circles. Users select which data columns map to the X and Y axes via two dropdown menus, built with a reusable `dropdownMenu` function. The plot, rendered as SVG with D3 v5, uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes. Each circle animates into position using a `transition().duration(2000).delay()` sequence, with axis labels updating dynamically upon menu selection.

Ddanish-nix
96% 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
96% 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 as circles positioned by X and Y axes. Users select which columns map to each axis via dropdown menus, built with a reusable `dropdownMenu` function that populates `<select>` elements from data columns. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render axes and grid lines, while circles transition smoothly with a 2000ms `transition().duration()`. Rendering uses SVG with animated circle placement based on the selected numeric columns.

Llrakla
96% match