Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menus

✓ Published0🌍 Public
CCassie
Last edited Oct 25, 2021
Created on Oct 24, 2021
Forked from Cars Scatter Plot

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.

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

Scatter Plot with Menus

This scatter plot visualizes car attributes from the UCI Auto MPG dataset, using dropdown menus to let users map any column to the X or Y axis. The D3 v5 code loads CSV data, converts numeric fields, and renders SVG circles with an animated transition on axis changes. It employs `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom `dropdownMenu` component, with gridlines and axis labels styled via CSS.

Jjesramyep1263
97% 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

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