Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published2🌍 Public
JJiapengFan
Last edited May 10, 2020
Created on May 10, 2020

This interactive scatter plot explores the relationship between pairs of attributes in the UCI Auto MPG dataset. Users select which columns to compare via dropdown menus, and the visualization updates with a staggered transition animation. The D3 v5 code uses `scaleLinear`, `axisBottom`, `axisLeft`, and data joins to render SVG circles representing cars. The implementation includes a reusable `dropdownMenu` component and a `scatterPlot` function that handles axis labels and tick marks, with values coerced to numeric type before rendering.

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…

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

Scatter Plot with Menus

This interactive scatter plot explores relationships between attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. Users select any two columns to map to the X and Y axes via dropdown menus, with the selected options driving d3.csv-loaded data through d3.scaleLinear, d3.axisBottom, and d3.axisLeft. The visualization renders as SVG circles that animate from the plot’s center to their positions using d3.transition with staggered delays. The reusable custom functions dropdownMenu and scatterPlot encapsulate the menu and chart logic, updating axes and labels dynamically.

Mmeihaoming
96% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores relationships between car attributes from the UCI Auto MPG dataset. Two dropdown menus let users select which numeric columns map to the X and Y axes, using a reusable `dropdownMenu` module. The `scatterPlot` module renders SVG circles with D3 scales and axes, animating points into place via `transition().duration(2000)` with staggered delays. Data is loaded with `d3.csv` and parsed as numbers before rendering.

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

Scatter Plot with Menus

This interactive scatter plot explores the relationship between different attributes of cars from the UCI Auto MPG dataset. Two dropdown menus allow users to select which columns are mapped to the X and Y axes, with the points animating to their new positions. The visualization uses d3.scaleLinear, d3.extent, and d3.axisBottom and axisLeft to construct the plot, while a custom dropdownMenu function handles the selection interface. The scatter plot is rendered as SVG with a transition over two seconds.

AAna
96% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between car attributes. Two dropdown menus allow users to select which columns map to the X and Y axes, enabling exploration of various attribute combinations. The visualization uses D3 v5 with `scaleLinear` scales, `axisBottom`, and `axisLeft` components to render the SVG chart. When menu selections change, the scatter plot updates with a staggered transition animation of circles using D3’s `.transition().duration(2000).delay()`.

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

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, showing relationships between car attributes. Two dropdown menus let users select which columns map to the X and Y axes, with axes, labels, and points updating accordingly. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `select` APIs, along with a reusable `dropdownMenu` component. Points animate via `transition().duration(2000)` with staggered delays, rendered as semi-transparent red SVG circles with grid lines.

Eeherchen
96% match