Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public
Ccoheist
Last edited May 1, 2023
Created on May 1, 2023

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.

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 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
97% 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 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 displays automobile 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 v5 to render SVG circles, with animated transitions repositioning points smoothly when axis selections change. The code leverages `d3.csv` for data loading, `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` for tick marks, and custom dropdown menu logic built with standard HTML `<select>` elements. Axis labels update dynamically to reflect the selected columns.

TTCSMFrogdance
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 frm Curran

This interactive scatter plot explores the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles. Users select which columns map to the X and Y axes via dropdown menus. Implemented with D3 v5, the visualization leverages `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render the plot. A custom `dropdownMenu` module handles menu creation, while the `scatterPlot` module animates circle positions using `transition().duration(2000).delay()` when data changes. SVG rendering and CSS styling complete the interface.

Bblackbottt
96% 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 data columns map to the X and Y axes via dropdown menus built with a reusable D3 module. The visualization uses d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for ticks, and animates circle transitions over two seconds. Data is loaded as CSV and parsed into numeric values.

Mmark.horne99@gmail.com
96% match