Fork of Scatter Plot with Menus

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

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

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

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, with circles animating to their new positions over two seconds when the selection changes. The code uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().duration()` to render the SVG visualization. A reusable `dropdownMenu` module handles the selector UI, while `scatterPlot` manages the axes, labels, and animated circle transitions.

Rrajeshathakur

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

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

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

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