Skip to main content
SimilarExport ZIP
100%

Fork of scatter plot with menus

✓ Published0🌍 Public
Aakshayms0
Last edited Nov 7, 2022
Created on Nov 7, 2022

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.

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
93% match
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
92% 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, 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
91% 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
91% 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
91% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes car attributes from the UCI Auto MPG dataset, with dropdown menus letting users choose which columns to map to the x- and y-axes. The visualization uses d3.scaleLinear and d3.axisBottom/axisLeft to render axes, while circles animate into position via d3 transitions. The code implements a custom dropdownMenu component and a scatterPlot function that updates axes and data points when menu selections change, rendering as SVG.

NNYCUBK201
91% 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
91% 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
91% match