Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Scatter Plot with Menus

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

This interactive scatter plot from a fork of a D3 v5 example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, with each point representing a car. Users select which numeric columns map to the x and y axes via two dropdown menus, built with a custom `dropdownMenu` function that manipulates HTML `select` elements. The `scatterPlot` module uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.extent` to render the SVG axes and circles, while `d3.transition` animates the points over two seconds whenever the axis selection changes.

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 displays car data from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which data columns map to the x and y axes using two dropdown menus, rendered with a custom `dropdownMenu` function built on D3 v5. The visualization uses D3 scales (`scaleLinear`), axes (`axisBottom`, `axisLeft`), and SVG circles, with a `scatterPlot` function handling the rendering and axis labels.

Ccoheist
95% 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
95% 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
95% 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
95% 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
95% 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
95% 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. Users select which columns to map to the X and Y axes via dropdown menus built with a reusable `dropdownMenu` function. The visualization uses d3.v5’s `scaleLinear`, `axisBottom`, and `axisLeft` for axes, and renders SVG circles with a 2-second animated transition that staggers each point’s appearance. Attribute mappings update dynamically when menu selections change, leveraging D3’s data joins and the `transition().delay()` method.

Vvivianaaai@qq.com
95% match
Loading thumbnail…

Fork of Scatter Plot with Menus

A scatter plot displays car data from the UCI Auto MPG dataset, with dropdown menus letting users choose which numeric columns map to the X and Y axes. The visualization uses D3 v5 with `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, while a custom `dropdownMenu` component handles option selection. SVG circles render each data point with animated transitions via `transition().duration()` and staggered `delay()` per point, creating a cascading effect when the axis variables change.

Wwzhang88
95% match