Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published1🌍 Public
SShane Carey
Last edited Feb 26, 2019
Created on Oct 8, 2018

This interactive scatter plot visualizes car data from the UCI Machine Learning Repository's Auto MPG dataset, letting users choose which columns to map to the X and Y axes via dropdown menus. Built with D3 v5, it uses `scaleLinear`, `scaleTime`, `axisLeft`, and `axisBottom` to render axes and `transition.attr` with staggered delays to animate each circle into place. The plot displays depth, temperature, and other measurements, with the SVG rendering updating in response to menu selections.

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 displays automobile data from the UCI Machine Learning Repository's Auto MPG dataset, where users select which numeric columns map to the X and Y axes via dropdown menus. Built with D3 v5, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, while transitions animate circles to new positions over one second with staggered delays. The visualization updates both axes and circle positions whenever a menu selection changes.

MMatthewJSonnen
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset. Using dropdown menus, viewers can select which numeric columns map to the X and Y axes, with the axis labels updating accordingly. The visualization is built with D3 v5, using `scaleLinear` for coordinate mapping, `axisBottom` and `axisLeft` for tick rendering, and `transition().duration(2000).delay()` for animated circle movement. The SVG scene includes gridlines with custom styling, and all data values are explicitly converted to numbers before plotting.

Ggcappadaniel
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset. Users control which columns map to the X and Y axes through dropdown menus, with animated transitions moving circles to their new positions over two seconds. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().delay()` to render the SVG, while `dropdownMenu` handles the interactive selections.

Ssourcebox-bug
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes car data from the UCI Machine Learning Repository's Auto MPG dataset, allowing users to explore relationships between numerical attributes. Two dropdown menus let the viewer select which columns from the dataset map to the X and Y axes, with selections triggering a re-render. The visualization is built with D3 v5, using `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and animated circle transitions via `transition().duration()`. The plot updates smoothly, displaying data points as semi-transparent red circles over a clean SVG canvas.

Aandys648
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which columns map to the X and Y axes via two dropdown menus, built with a reusable `dropdownMenu` function. The plot uses D3 v5 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` for scaling and axes. Circles are rendered with SVG and animate into position via `transition().duration(2000)` with staggered delays, while axis labels reflect the current column selections.

Cceltic660
97% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, allowing users to explore relationships between car attributes through dropdown menus. The menus let viewers dynamically select which columns map to the x- and y-axes, updating the visualization with an animated transition. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render the axes, while `transition().duration()` and `delay()` animate the circles to their new positions. The SVG rendering includes axis labels and grid lines, with data parsed as numeric values for accurate scaling.

Llizziechoi121
97% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays car data from the UCI Machine Learning Repository Auto MPG dataset, letting users select which columns to map to the X and Y axes via dropdown menus. The plot uses d3.csv to load data, d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom for scaling and axes, with SVG circles rendered at 10px radius. Menu interactions trigger transitions that animate each circle’s position over 2 seconds with staggered delays. Axes labels update dynamically based on the selected columns, and the visualization includes tick gridlines and rotated Y-axis text.

Cceltic660
97% 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. Users select which columns to plot on the X and Y axes via dropdown menus. The visualization is built with D3 v5, using `scaleLinear`, `axisLeft`, and `axisBottom` for axes, while `transition().duration()` animates circle positions when the data mapping changes. The SVG rendering includes axis labels and semi-transparent red circles.

JJunyanL
97% match