Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Jul 26, 2022

Created on Jul 26, 2022

This interactive scatter plot visualizes the Auto MPG dataset from UCI, letting users explore relationships between car attributes by selecting any two columns for the X and Y axes through drop-down menus. The scatter plot is built with D3 v5, using scaleLinear for axes and axisBottom/axisLeft for ticks. Circles are animated into place with a transition.delay effect. The dropdownMenu module creates the HTML select elements, and the chart updates its axes and labels when new mappings are selected.

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 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 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 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

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 numeric columns map to the X and Y axes through dropdown menus, triggering updates to the visualization. The code uses D3 v5 functions including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the SVG axes and animated transitions for repositioning circles. The dropdown menu component is built with a reusable function that appends `<select>` and `<option>` elements, handling user input via a change event listener that updates the selected columns.

Ssumukh-bharadwaj

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 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 interactive scatter plot explores the relationship between different attributes of cars from the UCI Auto MPG dataset. Using dropdown menus, the user can select any two data columns to map to the X and Y axes, with the visualization updating through animated transitions. The code utilizes d3.csv for data loading, d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, and a custom dropdownMenu module. Each data point is rendered as a semi-transparent red circle using SVG, with axis labels and gridlines visible.

IIsigned

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from UCI, letting users explore relationships between car attributes via dropdown menus. The D3 v5 code uses `d3.csv` to load data and `d3.scaleLinear` with axis generators to render SVG axes and circles. The `dropdownMenu` module updates selections, while `scatterPlot` animates points using `transition().duration()` when axes change. The example demonstrates dynamic data-driven visualization with user-controlled encodings.

YYedrup

96% match