Skip to main content
SimilarExport ZIP
100%

Mass/Height Menu

✓ Published1🌍 Public
HHyosukKim
Last edited Jan 16, 2019
Created on Jan 16, 2019
Forked from Mass/Height Menu

This scatter plot explores data from the UCI Machine Learning Repository's Auto MPG dataset, but it displays height and weight measurements from a separate CSV file. Two dropdown menus let users select which columns map to the X and Y axes, updating the plot dynamically. The visualization uses D3 v5's `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` APIs to animate the circles smoothly to their new positions as selections change. The SVG rendering uses semi-transparent green circles to show the data distribution.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set. The user can select which columns map to X and Y using dropdown menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Mass/Height Menu

This interactive scatter plot from the Auto MPG dataset (UCI Machine Learning Repository) lets users select which columns to map to the X and Y axes via dropdown menus. Using D3 v5, the visualization updates the axes and animates data points smoothly into their new positions as selections change. The code leverages `scaleLinear`, `axisBottom`, `axisLeft`, and transition methods to render SVG circles. The animation uses `transition().duration(200)` and per-point delays, with the dropdowns built through a reusable `dropdownMenu` component.

Cceltic660
94% match
Loading thumbnail…

Mass/Height Menu

This interactive scatter plot from the Auto MPG dataset (UCI Machine Learning Repository) lets users select which columns to map to the X and Y axes via dropdown menus. Using D3 v5, the visualization updates the axes and animates data points smoothly into their new positions as selections change. The code leverages `scaleLinear`, `axisBottom`, `axisLeft`, and transition methods to render SVG circles. The animation uses `transition().duration(200)` and per-point delays, with the dropdowns built through a reusable `dropdownMenu` component.

Cceltic660
94% match
Loading thumbnail…

Mass/Height Menu

This scatter plot displays car data from the UCI Machine Learning Repository’s Auto MPG dataset, where users select the X and Y columns via two dropdown menus. The plot uses d3’s `scaleLinear`, `axisLeft`, and `axisBottom` for axes, with circles animated via `transition().delay()` to move from an initial position to their data points. The `dropdownMenu` component builds the `<select>` elements, and data is loaded as CSV from a local file.

Ppinardag
93% match
Loading thumbnail…

Mass/Height Menu

This interactive scatter plot from the Auto MPG dataset lets users explore relationships between numeric car attributes by selecting X and Y columns from dropdown menus. The visualization updates dynamically with a 2-second animated transition, using D3 v5’s scaleLinear, axisBottom, axisLeft, and transition methods. Each circle represents a car, colored red with opacity, while dropdown menus are built using a reusable dropdownMenu function that binds to HTML select elements. Data loads from a CSV file containing car specifications, offering flexible comparison across all numeric columns.

Cceltic660
91% match
Loading thumbnail…

Mass/Height Menu

This interactive scatter plot visualizes the relationship between two selected numeric attributes of a dataset, allowing users to switch both the x- and y-axes via dropdown menus. The visualization uses D3 v5’s `select`, `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` APIs to render axes and circles, with a `transition().delay()` animation moving points to new positions. The data comes from a CSV file of weight and height records, loaded with `csv()`.

Cceltic660
88% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes such as horsepower, weight, and acceleration. Two dropdown menus let users select which columns map to the X and Y axes, with the plot transitioning smoothly when selections change. Built with D3 v5, the visualization uses d3.csv for data loading, d3.scaleLinear and d3.axisBottom/Left for scales and axes, and d3.transition for animated circle repositioning. Red semi-transparent circles render in SVG, with axis labels updating to reflect the chosen variables.

TThiago Carvalho
86% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes such as horsepower, weight, and acceleration. Two dropdown menus let users select which columns map to the X and Y axes, with the plot smoothly transitioning to show the new relationship. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, alongside SVG circles with animated transitions. The reusable `dropdownMenu` and `scatterPlot` modules handle updates, and the code leverages D3’s `csv` loading and data-binding patterns.

Cceltic660
86% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset. Using dropdown menus, users select which columns map to the X and Y axes, with the chart updating dynamically. The D3 v5 code uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom `dropdownMenu` component. SVG circles animate via `transition().duration(2000).delay()`, while axis labels and gridlines render from selected attributes like horsepower or weight.

Jjons288
85% match