Skip to main content
SimilarExport ZIP
100%

[A5] Vehicle Power vs. MPG (Bubble Chart)

✓ Published0🌍 Public
Cctan13@dons.usfca.edu
Last edited Feb 27, 2024
Created on Feb 23, 2024
Forked from HTML Starter

This bubble chart visualizes the relationship between vehicle torque (x-axis), horsepower (y-axis), and fuel efficiency (bubble size) for Audi, Chevrolet, and Volvo cars, with color encoding by make. Hovering over a bubble highlights it in orange and displays a tooltip with exact values. The visualization uses D3 v7’s `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and SVG circles, with data loaded from a CSV file and rendered in a React-compatible HTML page.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

[A6] Vehicle Power vs. MPG (Scatter Plot With Qualitative Color Scale)

This scatter plot compares vehicle torque and horsepower, with each point’s size encoding MPG. The chart uses a qualitative color scale to distinguish car makes—Audi in blue, Chevrolet in red, and Volvo in green—via `d3.scaleOrdinal` and a `d3.legendColor` legend. Data from a CSV file is loaded with `d3.csv`, parsed, and mapped to linear scales for the x- and y-axes, while circle radii are scaled by MPG using `d3.scaleLinear`. The SVG rendering is handled by D3 v7, with axes, labels, and a triangular-symbol legend drawn programmatically.

Cctan13@dons.usfca.edu
88% match
Loading thumbnail…

Bubble chart

This bubble chart shows the correlation between average horsepower (x-axis), torque (y-axis), and highway MPG (bubble size, color) for various car makes. The visualization uses a categorical color scale generated with `d3.interpolateTurbo` for make identification, with axes created via `d3.axisBottom` and `d3.axisLeft` from `d3.scaleLinear`. Hovering over a circle reveals a tooltip with the vehicle make, styled via CSS and positioned using SVG event coordinates. Data is loaded from a CSV file using `d3.csv`. A legend maps bubble size to MPG values and color-coded dots identify each brand.

Vvineelaramulapalli32
86% match
Loading thumbnail…

A6_T4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble’s x-position encodes horsepower, the y-axis represents torque, and the circle’s radius scales with highway MPG, while color distinguishes the manufacturer. Implemented with D3 v7, the chart renders as SVG with animated transitions and tooltips on hover, using `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.interpolateTurbo` for color mapping. A legend displays the MPG scale and make colors. Data is loaded from a local CSV via `d3.csv`.

DDee
86% match
Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between a vehicle’s average torque, horsepower, and highway MPG across different car makes. Each circle’s position maps horsepower and torque, while its radius encodes highway MPG and its color distinguishes the make. The chart includes a legend for MPG values and color-coded brand identifiers, with interactive tooltips on hover. The visualization is rendered as an SVG using D3.js v7, employing `d3.scaleLinear` for axes and size, `d3.scaleOrdinal` for colors, and `d3.csv` to load the dataset.

BBhavyaMammai
85% match
Loading thumbnail…

Bubble chart

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across different car makes, using data from a CSV file. Each circle’s position encodes torque and horsepower on the y and x axes, while its radius reflects highway MPG and its color distinguishes the manufacturer. Built with D3 v7, the SVG visualization includes hover tooltips and a legend showing MPG size scaling. The code uses `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and `d3.interpolateTurbo` for coloring.

Hharsha
85% match
Loading thumbnail…

act 6 t4

A bubble chart shows the correlation between average horsepower, torque, and highway MPG across car makes, with bubble size encoding MPG and color distinguishing manufacturers. The visualization, rendered as SVG with animation, loads D3 from UNPKG and uses `d3.csv` to import data. It builds axes with `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, while `d3.scaleOrdinal` and `d3.interpolateTurbo` assign colors. Interactive tooltips appear on hover via mouse events, and a legend scales bubble sizes for MPG values.

Ppavithranamburi24@gmail.com
85% match
Loading thumbnail…

Question4 Bubble chart

This bubble chart visualizes the relationship between power, torque, and fuel efficiency for various vehicles. Each bubble is positioned by its power and torque values, with the radius scaled to fuel efficiency and colors assigned per vehicle using d3.interpolateTurbo and d3.scaleOrdinal. Built with d3.v7, it renders via SVG with interactive tooltips showing vehicle make on mouse events. Axes are created using d3.axisBottom and d3.axisLeft, while a legend indicates fuel efficiency scaling. The data is loaded from a CSV file.

Gganesh.hns48@gmail.com
85% match
Loading thumbnail…

activity 6 task 4.1

This bubble chart visualizes the relationship between average horsepower and torque for various car makes, with bubble size encoding highway MPG and color distinguishing the vehicle makes. The visualization employs D3.js v7 to render SVG elements, using linear scales for the x and y axes. Animated tooltips appear on mouseover, displaying the make name, while a legend communicates the MPG scale. The data is loaded from a CSV file, and the D3 `scaleLinear` and `scaleOrdinal` APIs handle the mappings for size and color, respectively.

Ssairamisetti3829@gmail.com
85% match