Skip to main content
SimilarExport ZIP
100%

Animated Vehicle Consumption Scatterplot

✓ Published1🌍 Public
TToly
Last edited Dec 30, 2022
Created on Dec 30, 2022

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.

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…

Animated Vehicle Consumption Scatterplot

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.

AAndre J Denais
94% match
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
90% 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
80% 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
80% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between vehicle attributes from the auto-mpg dataset, with points plotted using D3 v5’s `scaleLinear` for the x-axis and `scalePoint` for the y-axis. The SVG rendering includes custom axes with tick formatting and a title. Data is loaded via `csv` and parsed before rendering circles colored steelblue, demonstrating D3’s modular imports and axis customization.

Bbharatbobby
80% 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
79% match
Loading thumbnail…

Car's Scatter Plot

This scatter plot shows the relationship between vehicle weight and fuel efficiency (MPG) for a dataset of cars, with each red circle representing an individual car model. The visualization uses D3.js v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data values to SVG coordinates and render labeled axes with gridlines. Data is loaded asynchronously via `csv` from a remote file, then parsed into numeric values before being drawn to the SVG canvas. The chart includes a title and axis labels, with circles having partial opacity to reveal overlapping points.

MModalMBS
79% match
Loading thumbnail…

Scatterplot

This scatterplot displays the relationship between vehicle weight and fuel efficiency (MPG) using the auto-mpg dataset loaded via d3.csv. The visualization uses D3 v6 scaleLinear functions to map data values to SVG coordinates, with axisBottom and axisLeft generating labeled axes. Circles are rendered through SVG elements with d3.selectAll and data joins, styled with semi-transparent steelblue fills. The chart includes custom axis label formatting via d3.format and margin-based layout transforms within a React-free HTML page.

MMatan
79% match