Skip to main content
SimilarExport ZIP
100%

new

✓ Published0🌍 Public
Ppraneeth7222@gmail.com
Last edited Apr 15, 2024
Created on Apr 15, 2024

This example demonstrates an interactive bubble chart that visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. It uses D3.js v5 to load CSV data, create linear scales for the axes and bubble size, and apply a color scale based on make. The visualization includes a tooltip that displays the car make on mouseover, with SVG circles representing each data point and animated transitions for the tooltip.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

new

This example demonstrates an interactive bubble chart that visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. It uses D3.js v5 to load CSV data, create linear scales for the axes and bubble size, and apply a color scale based on make. The visualization includes a tooltip that displays the car make on mouseover, with SVG circles representing each data point and animated transitions for the tooltip.

Ppraneeth7222@gmail.com
100% match
Loading thumbnail…

activity8-task4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle's position encodes horsepower on the x-axis and torque on the y-axis, while its size represents highway MPG and its color indicates the car brand. The D3.js v7 example loads data from a CSV file and renders the visualization as an SVG. It includes interactive tooltips on mouseover that display the car make, along with custom legends for both bubble size and categorical color assignments using `d3.scaleOrdinal`.

Bbobbymeyermsis@gmail.com
90% match
Loading thumbnail…

bubblechart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes from a CSV file. Each bubble's x-position encodes horsepower, its y-position torque, and its radius highway MPG, with color representing the make. The chart uses d3.scaleLinear for axes and bubble size, d3.scaleOrdinal with d3.interpolateTurbo for color, and d3.axisBottom and d3.axisLeft for axes. Interactive tooltips display the make on hover, implemented via d3.select and event handlers. SVG rendering is used with fixed margins and dimensions.

Bbhargavipagolu2025@gmail.com
90% 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
89% match
Loading thumbnail…

Fork of Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for different car makes. D3.js v7 renders SVG circles positioned by linear scales for horsepower and torque, with circle size encoding highway MPG and color mapped to car make via a custom ordinal scale using interpolateTurbo. Interactive tooltips display the make on mouseover, while legend circles and color swatches clarify the encoding. The chart loads data from a CSV file, with styling handled through CSS classes.

Ssathvik0311@gmail.com
89% match
Loading thumbnail…

Tutorial 4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each bubble positioned by horsepower (x-axis) and torque (y-axis), while its radius and color encode highway MPG and make, respectively. Built with D3.js v7, the SVG chart includes animated mouseover tooltips that display the car make, and a legend showing MPG scale and color-coded makes. It reads from a CSV file, uses linear scales for axes and bubble size, and applies an ordinal color scale using interpolateTurbo.

MMohammed Abdul Mannan
89% 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
89% match
Loading thumbnail…

Bubble chart

This bubble chart displays the correlation between average horsepower, torque, and highway MPG for various car makes, with each bubble’s position determined by the x- and y-scales and its size scaled by `d3.scaleLinear` for MPG. Color encodes the car make via `d3.scaleOrdinal` using `d3.interpolateTurbo`. The visualization includes interactive tooltips on mouseover and a legend for bubble sizes and color categories. It loads data from a CSV and renders as animated SVG using D3 v7.

NNagateja99
89% match