Skip to main content
SimilarExport ZIP
100%

Mass/Height Menu

✓ Published1🌍 Public
Cceltic660
Last edited Dec 11, 2018
Created on Dec 3, 2018
Forked from 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()`.

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

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.

HHyosukKim
88% 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
86% 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
83% match
Loading thumbnail…

Weigh/Height Comparison on Gender With Menus

This scatter plot compares height and weight across gender, using data loaded from a CSV file. It includes dropdown menus for filtering by category, though the menu options are placeholders. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while circles represent individual data points. The chart is defined within a single `render` function that attaches to a pre-selected SVG element.

Cceltic660
80% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore relationships between numeric measurements—including Length, Eye Diameter, and Jaw—across different countries. Two dropdown menus dynamically select which columns appear on the x- and y-axes, triggering a re-render of the visualization. Built with D3.js v5, it uses the library's `select`, `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs, along with custom dropdown and scatter plot modules. Circles animate into position using `transition().duration(2000).delay()`, while axis labels update to reflect the chosen variables. Data comes from a local CSV file.

KKanishka33
80% match
Loading thumbnail…

Scatter Plot with Menu

This interactive scatter plot displays the relationship between various car attributes, such as horsepower and weight, using data from a CSV file. A dropdown menu allows users to select which attribute is plotted on the x-axis. The visualization is built with D3 v5, using SVG for rendering and animated transitions for the circles. The code specifically utilizes D3's `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` to load data and render the chart, with a `dropdownMenu` component driving the dynamic updates.

Jjingwg3@163.com
79% match