Skip to main content
SimilarExport ZIP
100%

interactive Bubble chart - Engine

✓ Published1🌍 Public
NNita
Last edited Feb 26, 2025
Created on Feb 26, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

Kkfhujosefsson@dons.usfca.edu
91% match
Loading thumbnail…

Fork of interactive Bubble chart - Engine

This interactive dashboard visualizes car performance metrics, showing relationships between engine displacement, fuel economy, weight, and cylinder count across multiple chart types. Users select from bubble, scatter, bar, line, heatmap, pie, and box plot views via dropdown menu. Built with D3 v7, the visualization uses d3.csv for data loading, d3.scaleLinear, d3.scaleOrdinal, and d3.schemeCategory10 for scales and colors, with SVG-based transitions and tooltip interactions for each chart.

NNita
90% 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
86% 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
84% 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
84% match
Loading thumbnail…

Activity6_Task4

A D3.js bubble chart visualizes the correlation between a vehicle's cylinders, CO2 emissions, and engine size, using data from a CSV file. Each bubble's x-axis position corresponds to cylinder count, y-axis position to CO2 emissions, and radius to engine size, with colors representing different car makes. Interactive tooltips display the make on hover. The chart includes a legend for engine size and uses a color scale based on make. It is rendered with SVG and animation, using D3's `scaleLinear`, `scaleOrdinal`, `interpolateTurbo`, `axisBottom`, `axisLeft`, and event listeners.

Llikhitha.sarahah01@gmail.com
83% 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
82% 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
82% match