Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Scatter Plots with Menus

✓ Published0🌍 Public
MMajaha21
Last edited May 24, 2021
Created on May 24, 2021

A scatter plot of the auto-mpg dataset uses dropdown menus to select which columns appear on the x and y axes, with animated transitions as points move to their new positions. The visualization is built with D3 v6, using the `dropDownMenu` component and the `scatterPlot` module to bind data to SVG circles, scales via `scaleLinear` and `extent`, axes with `axisBottom` and `axisLeft`, and menus driven by `select` and `option` elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plots with Menus

This interactive scatter plot lets users explore the auto-mpg dataset by selecting which columns to plot on the x- and y-axes via dropdown menus. The chart renders as an SVG with axes and gridlines, and circles animate into position using D3 transitions with staggered delays. The implementation uses d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft, with a custom dropDownMenu component managing the select elements.

MMajaha21
96% match
Loading thumbnail…

Fork of Fork of Scatter Plot with Menus

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.

HHaileabGH
94% match
Loading thumbnail…

Fork of Scatter Plot with Menus

Two dropdown menus let the user select which columns of the Auto MPG dataset map to the X and Y axes of a scatter plot, with each point representing a car. As the selection changes, the axes, labels, and circles update with a smooth 2-second transition animation. The visualization is built with D3 v5, using `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for scales and axes, and a reusable `dropdownMenu` function to generate the HTML select elements. Data loads from a CSV file containing car specifications like horsepower, weight, and acceleration.

EEthan-Wu-juniper
93% match
Loading thumbnail…

Fork of scatter plot with menus

This visualization displays a scatter plot of automotive data from the auto-mpg dataset, with interactive dropdown menus that let users select which columns to plot on the x and y axes. The SVG renders circles positioned via d3.scaleLinear and transitions them into place using transition.attr. The dropdownMenu component uses d3 selection and event handling to trigger re-renders, while the scatterPlot module manages axes with d3.axisLeft and d3.axisBottom, updating labels and scales dynamically based on user selections.

Aakshayms0
93% match
Loading thumbnail…

Fork of Fork of Scatter Plot with Menus

This interactive scatter plot from the Auto MPG dataset lets users explore relationships between car attributes such as horsepower, weight, and acceleration. Two dropdown menus dynamically reassign the X and Y axes, triggering a new scatterPlot rendering with animated circle transitions. The code uses D3 v5 modules including `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration(2000).delay()`, alongside a custom `dropdownMenu` component. SVG circles transition from the center to their new positions, with axis labels updating to reflect selected columns.

TTCSMFrogdance
93% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This visualization presents a scatter plot of the Auto MPG dataset, allowing users to interactively select which data columns map to the X and Y axes through dropdown menus. Rendered using D3.js (v5) with SVG and animation, the plot encodes car characteristics like horsepower, weight, and acceleration. The code implements a reusable `dropdownMenu` component and a `scatterPlot` module that leverages `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration()` for animated point movement. Data is loaded as CSV from the UCI Machine Learning Repository.

PPenguin-jpg
93% 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
93% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot lets users explore the auto-mpg dataset by selecting which numeric columns to display on the x- and y-axes via two dropdown menus. Built with React and D3 v5, it uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while a custom `dropdownMenu` component handles the select elements. Circles animate into position over two seconds with a staggered delay, and axis labels update to reflect the chosen variables.

Iianjwo
92% match