Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Scatter Plot with Menus

✓ Published0🌍 Public
Wwzhang88
Last edited Dec 2, 2021
Created on Dec 2, 2021

This interactive scatter plot displays Pokémon statistics from the UCI Machine Learning Repository Auto MPG dataset, though the code actually loads Pokémon stats. Users select which attributes to compare using dropdown menus for both the X and Y axes, with options including attack, defense, speed, and other stats. The visualization uses d3.v5 with SVG rendering and transitions that animate circles from the center to their computed positions over two seconds. Generic dropdown menu and scatter plot modules handle the UI and rendering, with axes labeled and circles colored red with partial opacity.

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…

Pokemon Scatter Plot

This interactive scatter plot visualizes Pokémon stats from the PokeAPI, letting users compare any two numeric attributes via dropdown menus for the x and y axes. The D3.js v5 code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `scatterplot` functions to render SVG circles with a smooth `transition().duration(1000)` animation as data points fly into place. Axes include gridlines and rotated labels, while the `dropdownMenu` module updates the selected columns on change.

MMihir Sawant
86% match
Loading thumbnail…

Scatter Plot with Menus Including Species

This interactive scatter plot visualizes the Pokemon stats dataset, displaying two selectable attributes on the x and y axes. Users can choose any combination of statistical columns via dropdown menus, with the visualization automatically updating through D3’s join pattern and smooth 1000ms transitions. The chart distinguishes between continuous and categorical data, using `scaleLinear` for numeric values and `scalePoint` for categorical ones. D3 v6 powers the axis rendering, while circle elements feature hover effects that add a stroke highlight.

Wwzhang88
85% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot explores the UCI Auto MPG dataset, letting users dynamically choose which numeric columns (e.g., horsepower, weight, acceleration) map to the X and Y axes via dropdown menus. Built with d3.v5, it renders an SVG with animated circle transitions. The implementation uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` for scaling and axes, while a custom `dropdownMenu` module handles the select elements, updating the plot on change.

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

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles. Users select which data columns map to the X and Y axes via two dropdown menus, built with a reusable `dropdownMenu` function. The plot, rendered as SVG with D3 v5, uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes. Each circle animates into position using a `transition().duration(2000).delay()` sequence, with axis labels updating dynamically upon menu selection.

Ddanish-nix
84% match
Loading thumbnail…

Fork of 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. Users select which columns to map to the X and Y axes via dropdown menus built with the custom `dropdownMenu` function. The visualization uses d3.v5 with `scaleLinear`, `axisBottom`, and `axisLeft`, rendering SVG circles with animated transitions (`transition().duration(2000)`) that move points to their new positions when axes change.

HHaochen-Luo
84% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles. Users select which numeric columns map to the X and Y axes through dropdown menus, triggering updates to the visualization. The code uses D3 v5 functions including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the SVG axes and animated transitions for repositioning circles. The dropdown menu component is built with a reusable function that appends `<select>` and `<option>` elements, handling user input via a change event listener that updates the selected columns.

Ssumukh-bharadwaj
84% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset, with dropdown menus letting users choose which columns map to the X and Y axes. The visualization uses d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render the axes, while d3.transition animates circles moving to their new positions over two seconds. Data is loaded via d3.csv, and the interactive menus are built with native HTML select elements. The SVG rendering includes gridlines and axis labels that update dynamically.

RRikibens
84% match