Skip to main content
SimilarExport ZIP
100%

Animated Vehicle Consumption Scatterplot

✓ Published1🌍 Public
AAndre J Denais
Last edited May 29, 2021
Created on May 29, 2021

Animated Vehicle Consumption Scatterplot displays 2014 vehicle fuel consumption data from dipinpdinesh's GitHub repository, plotting CO2 emissions against MPG before cycling through engine size and cylinder count as the x-axis variable. The visualization uses D3.js v6 with SVG rendering and animated transitions to smoothly reposition circles between axis changes. It implements a reusable scatter plot pattern via selection.join, with a 1-second transition duration and staggered delays for circle updates, while axis labels and scales transition correspondingly.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts and Observable: selection.join.

Shows the Vehicle_Fuel_Consumption_Analysis from dipinpdinesh. This data contains vehicles from 2014.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Animated Vehicle Consumption Scatterplot

This fork of the Animated Vehicle Consumption Scatterplot visualizes 2014 vehicle fuel consumption data from dipinpdinesh's GitHub repository. The scatterplot cycles through CO2 emissions, engine size, and cylinder count as the x-axis, plotting each against combined MPG on the y-axis. Using D3.js v6 with selection.join and transition methods, circles animate positions and axes update smoothly. The chart leverages scaleLinear, axisBottom, and axisLeft, with SVG rendering and a timer that reassigns the x-value accessor every 17 seconds.

Ssidobagga
94% match
Loading thumbnail…

Animated Vehicle Consumption Scatterplot

This animated scatterplot visualizes vehicle fuel consumption and CO2 emissions from a 2014 dataset, plotting over 1,000 points with D3.js. Every 17 seconds, the x-axis transitions between CO2 emissions, engine size, and cylinder count, repositioning points via `selection.join` with staggered `transition` delays. The SVG chart uses `scaleLinear` domains, axis generators, and custom labels, with the y-axis fixed to combined MPG. Data loads from a CSV via `d3.csv`, and the reusable chart pattern updates axes and circles smoothly during each attribute swap.

TToly
94% match
Loading thumbnail…

Animated Cars Scatter Plot with Menus

This interactive scatter plot displays automobile performance data from the auto-mpg dataset, allowing users to compare any two numeric attributes through dropdown menus. The visualization animates circles transitioning between positions when different axes are selected, with each circle representing a vehicle. Built with D3 v5, the example uses scaleLinear and extent for axis scaling, axisLeft and axisBottom for gridlines, and transition().duration() with delay to animate the SVG circles. Two dropdown menus, created dynamically via a reusable dropdownMenu function, enable selection of x and y axis variables.

Vvic126
80% match
Loading thumbnail…

Scatter Plot

A scatter plot displays the relationship between vehicle weight and fuel efficiency (mpg) using data from the auto-mpg.csv dataset. The visualization renders circles for each car, positioned by linear scales created with d3.scaleLinear, and uses d3.axisBottom and d3.axisLeft for labeled axes. SVG elements are drawn via D3 v5 selections, with the chart’s styling handled in CSS. The code also parses numeric fields from the CSV and includes title, explanation, and source text within the SVG.

JJoseph Burns
79% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between vehicle model year and fuel efficiency (MPG), with each circle representing a car. The visualization uses D3 v5 to load data from a CSV via `d3.csv`, then applies linear scales (`scaleLinear`) and axes (`axisBottom`, `axisLeft`) to map the values. Gridlines are rendered through tick sizing, and the SVG circles are positioned using the scaled coordinates. The chart includes labeled axes and a centered title, with styling applied via CSS.

Rreubengann
79% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays fuel efficiency data for cars from the UCI Machine Learning Repository’s Auto MPG dataset. The visualization compares any two selected columns, such as weight or horsepower, through an SVG scatter plot with translucent red circles. Users switch axes via dropdown menus, which trigger a re-render of the plot. The visualization uses d3’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` functions, with circles animating to their new positions via a two-second `transition` with a staggered `delay`.

JJoker-tr
79% match
Loading thumbnail…

Cars Scatter plot with menus

This interactive scatter plot displays fuel economy data from the auto-mpg dataset, with dropdown menus that let users select which numeric columns to plot on the X and Y axes. The code uses D3.js v5 scales, axes, and transitions, along with a reusable dropdown menu component. Each car is represented by a semi-transparent green circle that animates to its new position when the menu selection changes, using `transition().duration(2000).delay()` for staggered motion. The visualization updates axes labels and tick marks dynamically based on the selected columns.

JJoel Schwartz
79% match
Loading thumbnail…

Cars Plot

This scatter plot visualizes the relationship between vehicle weight and fuel efficiency (MPG) using data from the UCI Machine Learning Repository’s Auto MPG dataset. It uses D3.js with an SVG rendering, where each circle represents a car, with position determined by linear scales for both axes. The code employs `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` for scaling and axes, while `csv()` loads the external dataset. Axis labels and a title are added via SVG text elements, with circles styled in translucent red.

CCaleb
78% match