Skip to main content
SimilarExport ZIP
100%

23 - scatta'plot w/ menus - dataviz 2018

✓ Published0🌍 Public
Zzach b.
Last edited Feb 17, 2022
Created on Jan 11, 2022

This interactive scatter plot explores relationships among car attributes from the UCI Auto MPG dataset, with dropdown menus letting users choose which columns to plot on each axis. The visualization updates smoothly, animating circles to their new positions over a one-second transition with a staggered delay. Built with D3 v7, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and a custom dropdown menu module to handle selection changes. The SVG renders semi-transparent steelblue circles, while axis labels and tick styling are customized via CSS.

AI-generated description

datraviz 2018 #23 - scatta'plot w/ menus

-- This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays car data from the UCI Machine Learning Repository Auto MPG dataset. Dropdown menus let users choose which numeric columns map to the X and Y axes, with the plot updating through animated transitions. Built with D3 v5, the visualization uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while a custom `dropdownMenu` module handles the selection controls. SVG circles render with opacity, and the code leverages `transition().duration()` and `.delay()` to animate points as the selected variables change.

Cceltic660
90% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses D3 v5 to visualize the Auto MPG dataset from the UCI Machine Learning Repository. Two dropdown menus allow users to select which numeric columns map to the X and Y axes, with the plot updating through D3’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs. SVG circles represent individual cars, animating to their new positions over two seconds via `transition().duration(2000)` and staggered delays. The code demonstrates reusable functions for the dropdown menu and the scatter plot, with axis labels dynamically reflecting the selected columns.

MMyCode
90% match
Loading thumbnail…

Scatter plot with menus

This interactive scatter plot explores relationships between attributes of cars from the UCI Auto MPG dataset. Two dropdown menus let the user select which columns to plot on the x and y axes. Built with D3 v5, it uses the `scaleLinear` and `axisLeft`/`axisBottom` APIs to render axes, while a custom `dropDown` module handles menu creation. Points animate smoothly between states using D3's `.transition().delay()` methods.

Ppaularl
90% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays relationships between attributes of cars from the UCI Auto MPG dataset. Two dropdown menus let users select which numeric columns to compare on the x- and y-axes, updating the visualization accordingly. Built with D3 v5, the code uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while circles transition smoothly to new positions via `transition().duration()`. The `dropdownMenu` module handles menu creation, and SVG provides the rendering canvas.

CCassie
90% match
Loading thumbnail…

Scatter Plot with Menus - 1

This interactive scatter plot displays automobile data from the UCI Machine Learning Repository Auto MPG dataset, allowing users to compare any two numerical attributes by selecting columns from dropdown menus. The visualization updates both axes and animates the red semi-transparent circles into position over two seconds using D3 v5 transitions. The code implements custom dropdown menu and scatter plot modules, leveraging D3’s scaleLinear, axisBottom, axisLeft, extent, and CSV file loading. The SVG rendering includes rotated axis labels and gridlines, with menus positioned above the chart for attribute selection.

Jjblaskovich
90% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores relationships between numeric attributes of cars from the UCI Auto MPG dataset. Two dropdown menus let viewers select which columns to plot on the x and y axes, with options like horsepower, weight, and acceleration. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, and `transition().duration(2000)` to animate circles from the center to their positions. The `dropdownMenu` custom module handles the menu interactions, while the scatter plot is built as a reusable SVG component.

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

Scatter Plot with Menus

This scatter plot visualizes car attributes from the UCI Auto MPG dataset, using dropdown menus to let users map any column to the X or Y axis. The D3 v5 code loads CSV data, converts numeric fields, and renders SVG circles with an animated transition on axis changes. It employs `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom `dropdownMenu` component, with gridlines and axis labels styled via CSS.

Jjesramyep1263
90% match