Skip to main content
SimilarExport ZIP
100%

Bubble chart - Engine Displacement vs. Fuel Economy - Bubble size = weigth, Color = Num Cylinders

✓ Published3🌍 Public
Kkfhujosefsson@dons.usfca.edu
Last edited Feb 26, 2025
Created on Feb 26, 2025

A bubble chart displays engine displacement against fuel economy for a dataset of cars loaded via `d3.csv`. Circle radius encodes vehicle weight using `d3.scaleSqrt`, while color, mapped through `d3.scaleOrdinal` with `d3.schemeCategory10`, distinguishes cylinder counts. Axes and labels are generated with `d3.axisBottom` and `d3.axisLeft`, and the SVG rendering includes a hover effect that increases opacity. A legend lists cylinder categories with colored swatches. The chart uses D3 v7 to bind data and render circles within an SVG container sized to the window.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

interactive Bubble chart - Engine

This interactive bubble chart visualizes the relationship between engine displacement and fuel economy for a dataset of cars, sourced from a CSV file. Each bubble’s size encodes vehicle weight, while its color represents the number of cylinders. Built with D3 v7, the SVG chart uses `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` to map data to positions, radius, and color. Hovering a bubble triggers a tooltip, and the chart includes axes, gridlines, and a legend for filtering by cylinder count.

NNita
91% match
Loading thumbnail…

Activity6_question4

A bubble chart plots engine displacement against fuel economy for various car models, with the bubble size encoding vehicle weight and the color encoding the number of cylinders via a categorical color scheme. The visualization uses D3 v7 to load CSV data, apply linear scales for the axes and a square-root scale for bubble radii, and render SVG circles. It also includes a legend showing the cylinder count categories.

Mmaneeshraja47@gmail.com
87% match
Loading thumbnail…

Assignment #5 Bubble Chart

This bubble chart displays the relationship between car models, their fuel economy in miles per gallon, and engine cylinder count. Each car is represented as a circle positioned along the x-axis by car name and y-axis by economy rating, with circle radius encoding cylinder count. The visualization uses d3.csv to load sample.csv, d3.scaleBand for the categorical x-axis, d3.scaleLinear for the y-axis, and d3.scaleSqrt for the radius mapping. SVG circles are rendered directly into the DOM, with axes generated via d3.axisBottom and d3.axisLeft.

Mmhzahdeh@dons.usfca.edu
84% match
Loading thumbnail…

Bubble chart

This bubble chart displays the correlation between average horsepower, torque, and highway MPG across multiple car makes, using circle size to represent fuel efficiency and color to distinguish manufacturers. Built with D3 v7, it loads data from a CSV file and renders an SVG with linear scales for the axes and bubble radius, plus an ordinal color scale. Interactive tooltips appear on mouseover, while legends for bubble size and color categories are drawn manually using SVG circles, lines, and text elements.

Ddriftcafe
83% match
Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes, with each bubble’s size encoding fuel efficiency and its color representing the manufacturer. Built with D3 v7, it uses `d3.csv` to load the dataset, `d3.scaleLinear` for axes and bubble sizing, and `d3.scaleOrdinal` for color mapping. Circles are rendered as SVG elements with tooltips on mouseover, while legends for both bubble size and make colors are included. Hover interactions are managed via event listeners, and the chart animates tooltip transitions.

Pperamranji
83% match
Loading thumbnail…

act6_question4

This bubble chart displays the relationship between engine size, vehicle weight, and fuel efficiency for a range of car models. Each circle's horizontal position represents engine size in liters, its vertical position indicates weight in kilograms, and its size and color encode fuel efficiency in miles per gallon, with a color gradient using `d3.interpolateTurbo`. The visualization uses D3 v7 to render the SVG, with axes scaled by `d3.scaleLinear` and interactive tooltips that appear on mouseover. A legend shows the mapping between bubble radius and efficiency values, while the model names are color-coded along the side.

Ssravani1969@gmail.com
83% match
Loading thumbnail…

act6_question4

This bubble chart displays the relationship between engine size, vehicle weight, and fuel efficiency for a range of car models. Each circle's horizontal position represents engine size in liters, its vertical position indicates weight in kilograms, and its size and color encode fuel efficiency in miles per gallon, with a color gradient using `d3.interpolateTurbo`. The visualization uses D3 v7 to render the SVG, with axes scaled by `d3.scaleLinear` and interactive tooltips that appear on mouseover. A legend shows the mapping between bubble radius and efficiency values, while the model names are color-coded along the side.

Ssravani1969@gmail.com
83% match
Loading thumbnail…

A5-Bubble Chart

This bubble chart visualizes the relationship between car engine horsepower and highway MPG, using bubble size to encode vehicle length and color to categorize city MPG fuel efficiency into low, medium, and high groups. Built with D3 v6, it loads a CSV file from a GitHub Gist, filters the data to 50 random samples, and renders an SVG with axes, a legend, and circles. The visualization uses `d3.scaleLinear` for the axes, `d3.scaleSqrt` for bubble sizing, and `d3.scaleOrdinal` for color categories.

SSukhraj Singh
82% match