Skip to main content
SimilarExport ZIP
100%

Scatter plot with menus

✓ Published0🌍 Public
Ppaularl
Last edited Feb 2, 2020
Created on Feb 2, 2020
Forked from Cars Scatter Plot

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.

AI-generated description

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 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
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…

Scatterplot with menus

This interactive scatterplot explores relationships between variables in the Auto MPG dataset from the UCI Machine Learning Repository. Two dropdown menus let users select which columns to plot on the x- and y-axes, dynamically updating the visualization. Built with D3 v5, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `dropdownMenu` component. The plot renders axes with gridlines and animates new data points via `.transition().duration(500)`, drawing paths instead of circles for the data series.

EEmmanuel Chukwujindu
95% 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
95% match
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
95% 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
95% 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
95% match
Loading thumbnail…

Scatter Plot with Menus

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.

JJiapengFan
94% match