Scatter Plot (Bubble Chart) with Custom Dataset

100%

Scatter Plot (Bubble Chart) with Custom Dataset

✓ Published0🌍 Public

Last edited Oct 30, 2025

Created on Oct 30, 2025

This bubble chart visualizes the relationship between horsepower and highway MPG for a custom car dataset, with circle size encoding torque. The visualization uses D3 v7 with an SVG rendering approach, loading CSV data from a gist URL. It employs d3.scaleLinear for both x and y axes, d3.scaleSqrt for bubble sizing, and d3.csv with d3.autoType for data parsing. Grid lines are generated using d3.axisBottom and d3.axisLeft with tickSize, while interactive tooltips are provided through SVG title elements on hover.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plot shapes

This example renders a bubble chart of car makes, plotting horsepower on the x-axis, torque on the y-axis, and using circle radius to encode highway MPG. The chart uses d3.csv to load data, d3.scaleLinear for axes and radius, and d3.scaleOrdinal with schemeCategory10 for color-coded legends. SVG circles are generated through data joins, with axes and a legend appended via D3’s axis components.

DDouglas mochama

87% 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

86% match

Loading thumbnail…

Scatter plot

This interactive scatter plot, rendered with SVG and animation, visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle's position is determined by its horsepower (x-axis) and torque (y-axis), while its size and color are scaled by highway MPG and car make, respectively. Mouseover interactions trigger a tooltip that displays the make, implemented with D3 event handlers. The visualization uses `d3.scaleLinear` for axes and bubble size, and `d3.scaleOrdinal` for color mapping, with data loaded from a CSV file.

Jjaswanthichowdarykalapala@my.unt.edu

86% 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

86% 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

86% 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

85% match

Loading thumbnail…

task-4

This scatter plot uses a bubble chart to visualize the correlation between average horsepower (x-axis), average torque (y-axis), and highway MPG (bubble size) across 31 car makes. The D3.js visualization, rendered with SVG, features an animated tooltip that displays the car brand on hover, while a legend maps bubble size to MPG values and a color scale distinguishes each make. Data is loaded from a CSV file and mapped to scales using `d3.scaleLinear`, with `d3.interpolateTurbo` generating the color palette.

Aajaykumarakula00@gmail.com

85% match

Loading thumbnail…

Activity6_Task3.2

This interactive scatter plot visualizes the relationship between horsepower and torque for various car makes, using bubble size to represent highway MPG and color to distinguish manufacturers. The visualization loads CSV data from a GitHub repository and renders it with D3 v7, employing scaleLinear for axes, scaleSqrt for bubble sizing, and scaleOrdinal with schemeCategory10 for categorical coloring. Axes are generated using axisLeft and axisBottom, while a custom shape legend component displays the car makes.

Ssahithigovindaraju@my.unt.edu

85% match