Is your car fuel-efficient?

100%

Is your car fuel-efficient?

✓ Published4🌍 Public

Last edited Sep 30, 2020

Created on Sep 14, 2020

This interactive scatterplot uses bubbles to explore the link between a car's CO2 emissions and its city fuel consumption, with colors distinguishing fuel types. The visualization is built with the Vega-Lite API, which compiles specifications to Vega for rendering. Data from a Kaggle dataset is loaded via d3.csv. The chart is configured with custom axis styling and font sizes for improved readability. Hovering reveals the fuel type through a tooltip handler.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the Kaggle, via [Gist:(https://gist.githubusercontent.com/arjunrao796123/7decbbf770bdb176406f22e8d24069a7/raw/3f990d0e5fdbe269153a0997ff628afc2912bbd6/Fuel_save.csv)].

MIT Licensed

Similar vizzes

Loading thumbnail…

Is your car fuel-efficient? based on selections

This visualization shows the relationship between CO2 emissions and city fuel consumption for different car models, with each point colored by fuel type and tooltips revealing the car make. A brush selection on the plot allows users to filter and highlight specific data points, while panning and zooming are enabled through scale interactions. The visualization is built using the Vega-Lite API and D3.js, with data loaded from a CSV file hosted on GitHub via d3.csv. The code implements a pan/zoom selection bound to scales and a brush selection with union resolution for highlighting.

AArjun Rao

89% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes a car dataset, showing fuel efficiency versus price with points colored by car type. Built as a reusable D3.js chart function, it uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeSet2` for categorical colors, and SVG circles with hover tooltips. The data is loaded from a CSV file via `d3.csv` with `d3.autoType`, and rendered in an SVG container with axes generated using `d3.axisLeft` and `d3.axisBottom`.

RRamdas Dheeraj

78% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile fuel efficiency by plotting miles per gallon against horsepower, with point size encoding weight and color distinguishing country of origin. Built using the Vega-Lite API and D3.js, it loads automotive data from the UCI Machine Learning Repository via a CSV file. The visualization is rendered as an SVG, configured with customized axis and label styling, and includes hover tooltips displaying vehicle names.

HHaowenWeiJohn

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

78% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot explores the relationship between fuel efficiency (mpg) and horsepower for cars, with point color indicating region of origin and point size representing vehicle weight. The visualization is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification that is rendered to SVG via Vega and Vega-Lite libraries. Data comes from the UCI Auto MPG dataset, loaded asynchronously with d3.csv. The code customizes axis styling through a config object and adds interactive tooltips displaying car names through the Vega Tooltip handler.

Ttknaik

77% match

Loading thumbnail…

Vega-Lite API_Car

This interactive scatter plot explores automobile fuel efficiency and performance using the UCI Machine Learning Repository's Auto MPG dataset. It displays miles per gallon against horsepower, with circles sized by vehicle weight, colored by country of origin, and offering tooltips for car names. Built with the Vega-Lite API for D3, the visualization leverages `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode these dimensions. The code loads data via `d3.csv`, applies a custom configuration for readable axes and fonts, and renders an SVG that fills the browser window.

SSkye Chen

77% match

Loading thumbnail…

Fuel Efficiency

This interactive visualization explores 2017 fuel efficiency data for major automobile brands, comparing average highway and city MPG through bar charts that animate when toggled. It demonstrates how engine cylinders and fuel type relate to mileage using scatterplots with hover tooltips. Built with D3 v5, the visualization uses SVG rendering and transitions to smoothly switch between highway and city mileage views, with data loaded from embedded arrays and external CSV sources.

Xxiaojingwu138

77% match

Loading thumbnail…

VarshaICE7

This visualization uses a scatter plot to explore the relationship between fuel efficiency (mpg) and horsepower across vehicles, with color indicating origin and point size encoding weight. Built with the vega-lite-api library and rendered using vega-lite and vega, the plot loads data from the UCI Auto MPG dataset via d3.csv. A tooltip from vega-tooltip displays each car’s name on hover. The visualization fits the entire browser window, and axis labels are styled with a custom configuration for improved readability.

VVReddy913

77% match