Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Aug 5, 2021

Created on Aug 5, 2021

This interactive scatter plot displays automotive data from the UCI Machine Learning Repository’s Auto MPG dataset, letting users choose which columns to map to the X and Y axes via dropdown menus. Built with D3 v5, the visualization uses `scaleLinear` for axes and animates circles with a 2-second transition when selections change. The chart includes axis labels and grid lines, rendered as SVG with opacity-styled red circles. Updates trigger a re-render that re-binds data and transitions circle positions, demonstrating dynamic visualization of multivariate car attributes like horsepower, weight, and acceleration.

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 automobile data from the UCI Machine Learning Repository's Auto MPG dataset. Users select which columns to plot on the X and Y axes via dropdown menus. The visualization uses D3 v5, with `scaleLinear` for scales, `extent` for domains, and `axisLeft`/`axisBottom` for rendering axes. Each data point is an SVG circle that transitions from the center to its position over 2 seconds using `transition().duration(2000)`. Axis labels update to reflect the selected columns.

PPijush Barman

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

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

96% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot displays automobile data from the UCI Machine Learning Repository's Auto MPG dataset, with dropdown menus above the chart allowing the user to select which columns map to the X and Y axes. The visualization uses D3 v5's `d3.select`, `d3.csv`, `d3.scaleLinear`, and `d3.extent` to load the data and compute scales. SVG circles are animated with a staggered transition, moving from the chart's center to their positions over two seconds as the axes and labels update accordingly.

Ttiffycshsf

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 interactive scatter plot explores the relationships between numeric attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. Dropdown menus let users select which columns to assign to the X and Y axes, with axis labels updating to reflect the chosen variables. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` to render scales and axes, while `transition().delay()` animates the points into their new positions. The SVG rendering uses semi-transparent red circles to show overlapping data points.

Nnikki81140

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

95% match