Fork of Scatter Plot with Menus

100%

Fork of Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Dec 28, 2023

Created on Dec 28, 2023

This interactive scatter plot visualizes 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 using D3.js dropdown menus, with circles animating to new positions via `transition().duration()` on axis changes. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` for scaling and axes, with the React framework managing the bubble chart component. Data loading is handled through `d3.csv`, and the animated transitions show each circle moving to its updated coordinates over two seconds.

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

Jjrj@es.aau.dk

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, letting viewers explore relationships between numerical attributes. Users select which columns map to the X and Y axes from dropdown menus. The visualization is built with D3 v5, using `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration()` to animate circles to their new positions when axes change. Data is loaded via `csv`, and the implementation uses an SVG rendering approach with reusable menu and scatter plot components.

Jjt23346059@gmail.com

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

94% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot from the Auto MPG dataset lets users explore relationships between car attributes by selecting X and Y axes from dropdown menus. Built with D3 v5, it uses `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for ticks. Circles animate from the center using `transition().duration(2000)` when data changes. The data comes from UCI’s Machine Learning Repository, and the visual encoding uses SVG circles with opacity.

JJuliaHsu

94% match