Skip to main content
SimilarExport ZIP
100%

D3 Cars Scatterplot with Menus

✓ Published0🌍 Public
Rrdeichert
Last edited Dec 17, 2019
Created on Dec 17, 2019
Forked from plot test

This interactive D3.js scatterplot displays automobile performance data from the auto-mpg dataset, plotting 392 vehicles across user-selected numeric attributes. Two dropdown menus let viewers independently choose which columns to map to the x- and y-axes, with options including mpg, horsepower, weight, and acceleration. Built with D3 v5, the visualization uses SVG for rendering and d3.axisBottom and d3.axisLeft for labeled axes. On menu changes, the scatterPlot function transitions each circle to its new position using a staggered d3 transition with duration and delay, creating an animated effect.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot With Menus

This interactive scatter plot visualizes automobile performance data from the UCI Auto MPG dataset, letting users explore relationships between numeric attributes like horsepower, weight, and acceleration. Two dropdown menus dynamically select which columns appear on the x and y axes, triggering smooth animations as circles transition to their new positions over two seconds. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, while the custom `dropdownMenu` and `scatterPlot` modules handle the menu interactions and SVG rendering with `transition().duration(2000)`.

TThomas Seberechts
94% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays automobile data from the auto-mpg dataset, with dropdown menus allowing users to select which columns to plot on the x and y axes. The visualization updates dynamically, showing relationships like horsepower versus weight with animated circle transitions. Built with D3 v5, the menus use the custom `dropDownMenu` component with select elements, while the scatter plot leverages `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().duration()` for smooth updates. Data values are parsed as numbers before rendering with SVG circles.

Zzenoe
94% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, letting users compare any two numeric columns by selecting them from dropdown menus. The visualization updates with animated transitions as new axes and circles are chosen. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll` with data joins to render SVG elements, while custom dropdown menus trigger re-renders of the chart. The scatter plot includes labeled axes with grid lines and semi-transparent circles representing individual cars.

Aarths-glitch
93% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the auto-mpg dataset, letting users compare any two numeric columns by selecting them from dropdown menus. The visualization updates with animated transitions as new axes and circles are chosen. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll` with data joins to render SVG elements, while custom dropdown menus trigger re-renders of the chart. The scatter plot includes labeled axes with grid lines and semi-transparent circles representing individual cars.

Aarths-glitch
93% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot from the D3 v5 gallery displays car attributes from the UCI Auto MPG dataset, with dropdown menus controlling the x- and y-axis variables. Users select columns like horsepower or weight to update the axes, and points animate to their new positions over two seconds using chained transition and delay methods. The visualization uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and SVG circles with opacity, while custom dropdown menu functions bind change events to trigger re-renders.

YYF
93% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Auto MPG dataset from the UCI Machine Learning Repository, letting users compare any two numeric car attributes (like horsepower, weight, or acceleration) by selecting columns via dropdown menus. Implemented with D3 v5, the visualization uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to build axes, while dropdown menus are created with a custom `dropdownMenu` function that appends `<select>` and `<option>` elements. Points animate into position with a 2-second transition, and the SVG rendering includes red semi-transparent circles.

AAnne Kerr
93% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Auto MPG dataset from the UCI Machine Learning Repository, letting users compare any two numeric car attributes (like horsepower, weight, or acceleration) by selecting columns via dropdown menus. Implemented with D3 v5, the visualization uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to build axes, while dropdown menus are created with a custom `dropdownMenu` function that appends `<select>` and `<option>` elements. Points animate into position with a 2-second transition, and the SVG rendering includes red semi-transparent circles.

AAnne Kerr
93% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays relationships between attributes of cars from the auto-mpg dataset, with dropdown menus allowing the user to select which columns appear on the x- and y-axes. The visualization updates smoothly with animated transitions, as circles grow from the center to their new positions when a menu selection changes. Built with D3 v5, the example uses reusable functions for the dropdown menus and scatter plot, leveraging d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft to render the SVG axes and data points.

YYedrup
93% match