Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Menus

✓ Published1🌍 Public
Wwzhang88
Last edited Dec 2, 2021
Created on Nov 23, 2021

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.

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…

Fork of Scatter Plot with Menus

This scatter plot displays car data from the UCI Auto MPG dataset, letting users choose which columns map to the X and Y axes via two dropdown menus. Built with D3 v5, it renders SVG circles with animated transitions, scaling each axis using d3.scaleLinear and d3.extent. The dropdown menu component uses D3 selections to bind options and handle change events, while axis labels update dynamically as the user selects different attributes.

Kkezianathania021@gmail.com
97% 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
96% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot displays the UCI Auto MPG dataset, showing relationships between car attributes such as horsepower, weight, and acceleration. Two dropdown menus let users select which columns map to the x- and y-axes, triggering a staggered 2-second animated transition where circles move to their new positions. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `selection.transition().delay()`, rendering as SVG with a custom `dropdownMenu` component for interactive control.

PPiotr Paszek
96% 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
96% 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
96% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles. Users can select which data columns map to the X and Y axes through two dropdown menus. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` APIs, with SVG rendering. Selecting a new column triggers an animated transition where circles move to their new positions over one second, using `transition().duration(1000).delay((d, i) => i * 10)` for a staggered effect. The plot is updated via a custom `dropdownMenu` module and `scatterPlot` function.

Ppplomith
96% match
Loading thumbnail…

Fork of Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as red, semi-transparent circles. Two dropdown menus let users dynamically select which data columns map to the X and Y axes. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct scaled axes, while circle positions transition over 2 seconds with staggered delays. The custom `dropdownMenu` utility manages the HTML select elements, and axis labels update to reflect the selected columns.

Jjt23346059@gmail.com
96% 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
95% match