Is your car fuel-efficient? based on selections

100%

Is your car fuel-efficient? based on selections

✓ Published0🌍 Public

Last edited Oct 15, 2020

Created on Sep 29, 2020

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.

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)].

I referred https://observablehq.com/@vega/vega-lite-composing-selections for the code.

If you use the shift key, you can deselect a region. You can scroll across the screen with the control key.

MIT Licensed

Similar vizzes

Loading thumbnail…

Is your car fuel-efficient?

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.

AArjun Rao

89% 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…

Asssssignment

This visualization shows the fuel efficiency (mpg) of 20 car models, with horizontal bars representing each car's miles per gallon alongside their make. The chart uses blue tick lines and light green bars against a clean white background, with a labeled x-axis for population-2020 values. Built with React and D3 v5, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG elements through custom `AxisBottom`, `AxisLeft`, and `Marks` components that generate the ticks and rectangles. Data is loaded from a CSV file via D3's `csv` function.

HHemanthh81

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

75% match

Loading thumbnail…

Cars Scatter Plot

This D3.js v5 scatter plot visualizes fuel efficiency data from the cars2017_new.csv dataset, plotting each car model's average city MPG as a horizontal bar. The y-axis displays car makes using a band scale, while the x-axis represents city MPG values with a linear scale. Built with SVG rendering, the visualization uses D3's `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `scale.category20` APIs. The code reads the CSV file, converts numeric fields, and appends styled rectangles to the SVG canvas to represent each data point.

SSushanta77

75% match

Loading thumbnail…

Question 2

This visualization shows the proportional distribution of CO2 emissions by fuel type across different vehicle categories. Using a horizontal stacked bar chart, each vehicle type displays segments for Petrol, Diesel, Electric, and Hybrid fuel sources, colored with a categorical scale. The D3.js code loads data from a CSV file, stacks the fuel-type columns using the `d3.stack` API, and renders the result as SVG rectangles scaled by the linear x-axis. A legend identifies each fuel type, while the y-axis labels the vehicle types. The chart enables quick comparison of fuel-source shares within each vehicle category.

Nnitishsurneni@gmail.com

75% match

Loading thumbnail…

HW6 — Car Data Visualization

This scatter plot shows simulated car data from 2019–2024, mapping engine size on the x-axis against combined fuel efficiency on the y-axis. Each circle represents a model-year combination, with circle area encoding horsepower and color distinguishing vehicle type. The visualization uses D3 v7 with SVG rendering, employing d3.scaleLinear for axes and d3.scaleOrdinal for categorical coloring. Interactive features include hover tooltips and click-to-select highlighting, implemented through d3.select and event listeners. Data comes from a CSV file loaded via d3.csv.

Vvvit.21bq5a0514@gmail.com

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

74% match