Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plots with Menus

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

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Scatter Plots with Menus

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.

MMajaha21
96% 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
94% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the auto-mpg dataset, with dropdown menus allowing viewers to select which numerical columns appear on the x- and y-axes. Built with D3 v5, it uses scales, axes, and SVG circles to render the data, while a custom `dropdownMenu` module and D3’s `transition` animate points to new positions over two seconds when the axis selections change. The scatter plot code reuses `axisBottom`, `axisLeft`, and `scaleLinear` for the chart structure.

Ffahmijaafar
94% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from UCI, letting users explore relationships between car attributes by selecting any two columns for the X and Y axes through drop-down menus. The scatter plot is built with D3 v5, using scaleLinear for axes and axisBottom/axisLeft for ticks. Circles are animated into place with a transition.delay effect. The dropdownMenu module creates the HTML select elements, and the chart updates its axes and labels when new mappings are selected.

AAbdouEnsaj
94% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses dropdown menus to let users choose which columns of the auto-mpg dataset appear on the x- and y-axes. The code employs d3.scaleLinear, d3.axisBottom, and d3.axisLeft, with a custom dropdownMenu component that updates the chart on selection changes. Circles transition with a staggered delay of 2 seconds each time the axes change, rendered as SVG elements with a red, semi-transparent fill.

Ssakhabutdinov
94% 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
94% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Auto MPG dataset from the UCI Machine Learning Repository, with dropdown menus letting users choose which numeric columns map to the X and Y axes. It uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` loader to render SVG circles with a staggered 2-second transition when axes change. The component-based code separates menu creation (`dropdownMenu`) from the chart drawing (`scatterPlot`), with axis labels updating alongside the data.

YYue Ma
94% 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