Skip to main content
SimilarExport ZIP
100%

Scatter plot with menus

✓ Published2🌍 Public
IIgor Borzunov
Last edited Aug 29, 2020
Created on Aug 29, 2020

This interactive scatter plot displays relationships between pairs of numerical attributes of cars, using data from the UCI Auto MPG dataset. It shows one attribute on each axis, with red, semi-transparent circles representing individual cars, enabling pattern exploration across different variables. The visualization employs HTML `<select>` menus, built with custom JavaScript, to dynamically switch the x and y axes. Rendering uses D3 version 5's `select`, `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` modules, with a `transition` animation for a 1000-millisecond circle movement when axes change.

AI-generated description

This Scatterplot shows data about cars fom UCI Machine Learning Repository: Auto MPG Data Set

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot with menus

This interactive scatterplot displays relationships between attributes of cars from the UCI Auto MPG dataset, letting users choose which columns appear on the x- and y-axes via dropdown menus. The visualization uses d3.csv to load data, d3.scaleLinear and d3.extent for scales, and d3.axisBottom and d3.axisLeft for axes. Each point transitions smoothly between selections using d3 transitions with staggered delays, while the SVG rendering includes gridlines and axis labels.

KKainsli
96% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot explores the relationship between different attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which columns to map to the X and Y axes via dropdown menus, built with custom D3 code that creates and updates `<select>` elements. The visualization itself uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to render axes and SVG circles, with a staggered `transition().delay()` animation that moves points from the center to their final positions over two seconds.

LLittledevil7
94% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays relationships between numerical attributes of cars from the UCI Auto MPG dataset. Two dropdown menus let viewers select which columns appear on the x- and y-axes, with each selection triggering a smooth 2-second transition animation that moves the red semi-transparent circles to their new positions. The visualization uses D3 v5 with SVG rendering, including `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().duration().delay()` to update axes and points dynamically.

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

Scatter Plot with Menus

This interactive scatter plot displays relationships between attributes of cars from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which data columns map to the x and y axes via dropdown menus, triggering smooth circle transitions over two seconds. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.extent for scales, d3.axisLeft and axisBottom for axes, and d3.transition with a staggered delay for animations.

CCurran Kelleher
94% 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
93% 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
93% match