Skip to main content
SimilarExport ZIP
100%

Fuel Efficiency

✓ Published0🌍 Public
Xxiaojingwu138
Last edited Jul 30, 2023
Created on Jul 22, 2023
Forked from D3 Starter

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Tutorial 4

This interactive bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across 31 car makes, with bubble size encoding fuel efficiency and color distinguishing brands. Built with d3.v7, the SVG visualization includes hover tooltips showing make names, a legend for MPG values, and a color key for makes. It reads data from a CSV file using d3.csv, employs d3.scaleLinear for axes and bubble sizing, d3.scaleOrdinal with interpolateTurbo for color assignment, and renders circles with mouse event handlers for interactive tooltips.

Aasheshpinisetti@my.unt.edu
80% match
Loading thumbnail…

act6_Task4

This bubble chart displays the correlation between average horsepower, torque, and highway MPG across 31 car makes, using circle size to represent fuel efficiency and color to distinguish brands. It loads CSV data with d3.csv, scales the axes with d3.scaleLinear, and maps bubble radius through a separate linear scale. Interactive tooltips appear on mouseover, while a legend explains the MPG sizing. The visualization is rendered as SVG with opacity changes on hover, built using D3 v7 selection and join methods.

Ssaisathvikapotluri@gmail.com
80% match
Loading thumbnail…

ry0214_question 2

This example visualizes the relationship between vehicle horsepower and highway fuel efficiency (MPG) across 31 car makes, from Scion to Maybach. An area chart displays the trend, with horsepower on the x-axis and highway MPG on the y-axis, using a semi-transparent steelblue fill to emphasize the decline in fuel economy as engine power increases. The visualization is built with D3 v7, employing `d3.scaleLinear` for axes, `d3.area` for the shaded region, and `d3.axisBottom`/`d3.axisLeft` for labeled ticks, alongside a simple legend. The SVG rendering uses data embedded directly in the script, with margins and dimensions set for a clean 800x500 layout.

Rreddyyeddula16@gmail.com
80% 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
79% match
Loading thumbnail…

Task4

This visualization shows the relationship between average horsepower, torque, and highway MPG for various car makes. Each bubble represents a car brand, positioned by horsepower on the x-axis and torque on the y-axis, with bubble size encoding highway fuel efficiency and color distinguishing makes. The code loads data from a CSV file using d3.csv, applies linear scales to both axes and a sqrt scale for bubble radius, and renders circles as SVG elements. Interactive tooltips appear on hover using D3 event listeners, and axis labels and a title are generated with SVG text elements.

FFayezuddin Mohammed Khan
79% match
Loading thumbnail…

HW6 — Year Comparison

This interactive D3.js visualization compares simulated car fuel efficiency (MPG) across years 2019–2024, using engine size and vehicle type as axes and color categories. It offers two views: an animated year-by-year transition and a side-by-side small multiples comparison, synchronized with a timed trial feature. The chart uses `d3.csv` to load data, `d3.scaleOrdinal` for color mapping, and SVG rendering with buttons for animation playback and timing. Both views share identical axis ranges and vehicle-type colors, helping users identify upward shifts in MPG for vehicle categories.

Vvvit.21bq5a0514@gmail.com
79% match
Loading thumbnail…

Activity 8 - Task 4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each circle sized by fuel efficiency and colored by manufacturer. The visualization uses D3 v7 with SVG rendering, scaling torque and horsepower to x- and y-axes while mapping highway MPG to circle radius via d3.scaleLinear. Hovering reveals a tooltip displaying the make. A legend communicates MPG values and brand colors. Data comes from a local CSV file processed with d3.csv, using d3.scaleOrdinal for categorical color assignment and d3.interpolateTurbo for the color range.

SSamir Tarda
79% match
Loading thumbnail…

Fork of Bubble chart

This bubble chart shows the correlation between average horsepower, torque, and highway MPG for various car makes, using circle size to encode fuel efficiency and color to distinguish brands. The visualization includes an interactive tooltip that displays the make on hover, along with a legend for both the MPG scale and the color-coded categories. Built with D3.js v7, it loads data from a CSV file and renders SVG elements with animations for tooltip transitions, while axes and labels are generated using d3.scaleLinear and d3.axisBottom/axisLeft.

Aabjalshaik02@gmail.com
78% match