Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published0🌍 Public
Llystran
Last edited Apr 26, 2020
Created on Apr 26, 2020

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying cars' attributes as circles. Dropdown menus let users select which data columns map to the X and Y axes, dynamically updating the chart. The code uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `dropdownMenu` custom component. Animated transitions, via `transition().duration(5000)`, move circles to new positions, while SVG renders the axes, labels, and semi-transparent red points.

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 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
98% 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 different car attributes. Dropdown menus let users select which columns map to the X and Y axes, updating the visualization dynamically. Built with D3 v5, the code uses d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for tick marks, and a custom dropdownMenu component with animated circle transitions via d3.transition over a 2-second duration. Each data point appears as a red circle at 10-pixel radius, with SVG rendering and axis labels.

CChenluWang96
98% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying cars as red circles. Users select which numeric columns map to the x- and y-axes via dropdown menus built with a custom `dropdownMenu` function. The chart updates through D3 v5, using `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, with animated circle transitions (`transition().duration(2000)`) as new data is rendered.

Iidwann-eng
98% match
Loading thumbnail…

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 to map to the X and Y axes using dropdown menus, with the chart animating transitions between selections. Built with D3 v5, the visualization uses `d3.csv` for data loading, `d3.scaleLinear` for axes, `d3.axisLeft` and `d3.axisBottom` for ticks, and SVG rendering. The custom `dropdownMenu` component handles menu creation, while the scatter plot animates circle positions over two seconds.

AAlain Jennotte
97% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset. Using dropdown menus, users select which columns map to the X and Y axes, with the chart updating dynamically. The D3 v5 code uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom `dropdownMenu` component. SVG circles animate via `transition().duration(2000).delay()`, while axis labels and gridlines render from selected attributes like horsepower or weight.

Jjons288
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles scaled by linear axes. Two dropdown menus allow users to select which column maps to the x-axis and y-axis, dynamically updating the visualization on change. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while `select` and `transition().duration(2000).delay()` animate points moving between positions. The SVG rendering includes axis labels and tick marks styled via CSS.

LLudovicGouverneur
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles positioned on x and y axes. Two dropdown menus allow users to select which data columns map to each axis, triggering a transition that animates the circles to their new positions. The visualization uses d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and d3.select for DOM manipulation. A custom dropdownMenu module handles the menus, while the scatterPlot module manages SVG rendering with transitions on circle positions.

BBrandon Lehr
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying car attributes as circles positioned on x and y axes. Two dropdown menus allow users to select which data columns map to each axis, triggering a transition that animates the circles to their new positions. The visualization uses d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and d3.select for DOM manipulation. A custom dropdownMenu module handles the menus, while the scatterPlot module manages SVG rendering with transitions on circle positions.

BBrandon Lehr
97% match