Bubble chart tutorial

100%

Bubble chart tutorial

✓ Published0🌍 Public

Last edited Oct 30, 2025

Created on Oct 30, 2025

This bubble chart uses D3.js v7 to visualize the correlation between average horsepower (x-axis), torque (y-axis), and highway MPG (bubble size) across 31 car makes. Each semi-transparent circle is colored by manufacturer using an ordinal scale with interpolated turbo colors. The SVG rendering includes interactive tooltips that appear on mouseover, along with legends for both bubble size and color categories. Data is loaded from a CSV file via d3.csv.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each circle’s position mapped by d3.scaleLinear axes for horsepower (x) and torque (y), while its radius encodes highway MPG using another linear scale. Color distinguishes car makes via d3.scaleOrdinal with d3.interpolateTurbo, and interactive tooltips appear on mouseover using D3 event handlers. The SVG renders from a CSV file, with a legend for bubble sizes and color categories, all built with d3.v7.

Rrikhitakoganti12

95% match

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower (x-axis), torque (y-axis), and highway MPG (bubble size and color) for 31 car makes. Each circle is positioned by its horsepower and torque values, while its radius encodes highway MPG and its color distinguishes the car brand. Rendered as SVG with animation, the chart uses D3.js v7 APIs including `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for color mapping, and `d3.interpolateTurbo` for the color palette. Interactive tooltips appear on mouseover, displaying the car make. The data comes from a CSV file, with a legend explaining the highway MPG bubble sizes.

LLakshmanRangisetti

95% match

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each bubble’s position encodes horsepower (x-axis) and torque (y-axis), while its radius scales with highway MPG and its color maps to the car make. Built with D3.js v7, it renders as SVG with interactive tooltips on hover and includes a bubble-size legend and color-coded make identifiers. Data is loaded from a CSV file and processed using `d3.csv`, with scales and axes created via `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`.

BBhavanaGIrni

94% match

Loading thumbnail…

Bubble chart

A bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with bubble size encoding MPG and color distinguishing manufacturers. D3.js v7 loads the CSV data and renders the SVG chart with linear scales for axes and bubble radius, plus an ordinal color scale using `d3.interpolateTurbo`. Hovering reveals a tooltip showing the car make, while custom legends display both the MPG size mapping and color-coded manufacturer categories.

HHarshiiiiiiiip

94% match

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with circle size encoding MPG and color distinguishing brands. Users hover over bubbles to see the make name via a tooltip. Built with D3 v7 and SVG, it uses d3.csv to load data, d3.scaleLinear for axes and sizing, d3.scaleOrdinal with interpolateTurbo for colors, and includes a legend for MPG values.

Cchsaisriharsha@gmail.com

94% match

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes using D3 v7. Circles are positioned by horsepower (x-axis) and torque (y-axis), with size encoding highway MPG and color distinguishing car brands. The SVG rendering includes interactive tooltips on hover that display the make. Data loads from a CSV file, with scales handling size and ordinal color mapping, plus a legend explaining bubble size and make colors.

NNukaShravanKumar

94% match

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each bubble’s position encodes horsepower (x-axis) and torque (y-axis), while its radius represents highway MPG and its color maps to the car manufacturer. Built with D3 v7 and SVG, the chart includes interactive tooltips on mouseover, a size legend, and a color legend. Data is loaded from a remote CSV using `d3.csv`, with scales created via `d3.scaleLinear` and `d3.scaleOrdinal`.

Ssrikkanth05

94% match

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower (x-axis), average torque (y-axis), and highway MPG (bubble size) for various car makes, using a turbo color scale to distinguish each brand. Interactive tooltips reveal the make on hover, and the SVG is generated dynamically from a CSV file. The chart employs D3 v7 APIs including `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal`. A legend shows the bubble size scale and color key, with smooth transitions on tooltip display.

Bbogasamudramvamsikrishnareddy

94% match