Skip to main content
SimilarExport ZIP
100%

Fork of Hello VizHub

✓ Published0🌍 Public
PPiotr Paszek
Last edited May 3, 2021
Created on Apr 28, 2021
Forked from Hello VizHub

This interactive scatterplot lets users explore the relationship between any pair of numeric variables from the auto-mpg dataset. Two dropdown menus, built with the custom `dropdownMenu` function, independently select the x and y axes. The chart updates dynamically using D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and SVG rendering. The `scatterPlot` module reuses enter/merge patterns to efficiently update circles and axis labels. Data loads via `d3.csv` and appears as semi-transparent red circles.

AI-generated description

My simple scatterplot with two dimensions selected separately.

MIT Licensed

Similar vizzes

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
85% 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
85% 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 via dropdown menus. The D3 v5 code uses `d3.csv` to load data and `d3.scaleLinear` with axis generators to render SVG axes and circles. The `dropdownMenu` module updates selections, while `scatterPlot` animates points using `transition().duration()` when axes change. The example demonstrates dynamic data-driven visualization with user-controlled encodings.

YYedrup
84% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot explores the relationship between different attributes of cars from the UCI Auto MPG dataset. Using dropdown menus, the user can select any two data columns to map to the X and Y axes, with the visualization updating through animated transitions. The code utilizes d3.csv for data loading, d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, and a custom dropdownMenu module. Each data point is rendered as a semi-transparent red circle using SVG, with axis labels and gridlines visible.

IIsigned
84% 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
84% match
Loading thumbnail…

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

Fork of scatter plot maenu

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, letting users compare any two numeric car attributes by selecting columns from dropdown menus. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` to animate circles from the chart center to their positions over two seconds. Data is loaded from session storage, and the `dropdownMenu.js` module handles menu interactions, while `scatterPlot.js` manages the SVG rendering with animated circle transitions.

Ddanish-nix
84% 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
83% match