Skip to main content
SimilarExport ZIP
100%

Bubble Chart

✓ Published6🌍 Public
Mmandadi1999
Last edited Jan 3, 2024
Created on Jul 22, 2023
Forked from D3 Starter

This bubble chart compares beverage manufacturers by plotting their glucose levels on the x-axis, ratings on the y-axis, and calorie content as bubble size. The SVG visualization uses D3 v7 with `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.schemeSet1` for color coding by brand, and `d3.csv` to load the data. It includes custom legends for both calorie size and beverage categories, with red-stroked, semi-transparent circles at 70% opacity.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bubble Chart

This bubble chart compares beverage manufacturers by plotting glucose levels on the x-axis, ratings on the y-axis, and calorie count as bubble size, with color distinguishing beverage types. Built with D3 v7, the visualization uses d3.scaleLinear for axes and bubble sizing, d3.scaleOrdinal for color mapping, and d3.schemeSet1 for the categorical palette. Data is loaded from a local CSV file using d3.csv, and the SVG rendering includes custom legends for both bubble size and color categories, with all marks styled with red strokes and 0.7 opacity.

EEtupino
97% match
Loading thumbnail…

Bubble Chart Creation

A bubble chart compares beverage manufacturers by plotting glucose levels on the x-axis against ratings on the y-axis, with bubble size encoding calories and color distinguishing beverage types. The visualization uses D3 v7 to load CSV data, apply linear scales for axes and bubble radius, and an ordinal color scale with `d3.schemeSet1`. SVG circles are rendered with opacity and red strokes, accompanied by legends for calorie size and brand colors.

SSwapna1915
94% match
Loading thumbnail…

Fork of Bubble Chart new

This bubble chart compares beverage manufacturers by plotting glucose levels on the x-axis and beverage ratings on the y-axis, with bubble size representing calorie content and color distinguishing brands. The visualization includes legends for both bubble size and brand colors. Built with D3 v7, it uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.schemeSet1` for color assignment, and renders as SVG circles. The data is loaded from a CSV file containing ratings, calories, and glucose values for various beverages.

Hhuangweijie0310102@gmail.com
93% match
Loading thumbnail…

Bubble Chart

This bubble chart compares beverage types by rating, glucose, and calorie content using d3.csv to load the data and d3.scaleLinear for the x, y, and bubble-size scales. It renders SVG circles with d3.schemeSet1 for color encoding by beverage brand, and includes manual legends for calorie size and brand colors. The code uses d3.axisBottom and d3.axisLeft for the axes.

SSwapna1915
92% match
Loading thumbnail…

Question 4

This bubble chart compares beverage manufacturers based on their glucose levels, ratings, and caloric content, with each circle’s x-axis position representing glucose, y-axis representing rating, and size mapped to calories. Color encodes the brand, as identified through the `Make` column in the loaded CSV data. Built with D3.js v7, the visualization uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for categorical coloring, and SVG circles with interactive tooltips that appear on mouseover. A legend for calorie sizes and color-coded brand markers are included directly in the SVG canvas.

Sshivakumarganji@my.unt.edu
90% match
Loading thumbnail…

act8_question4

This bubble chart compares beverage manufacturers based on glucose levels and ratings, with bubble size representing calorie content and color indicating the brand. Loaded from a CSV file, the visualization uses D3 v7 scales (`d3.scaleLinear`, `d3.scaleOrdinal`) to map data to x/y positions, bubble radius, and color. The SVG rendering includes axes, labels, interactive tooltips on mouseover, and legends for both calorie size and brand color.

Rravularasesh3102@gmail.com
90% match
Loading thumbnail…

act8_question4

This visualization presents a bubble chart comparing beverage manufacturers based on their glucose levels and ratings, with bubble size encoding calorie count and color indicating the brand. The chart features an animated tooltip displaying exact calorie and glucose values upon hover. Built with D3.js (v7), the visualization uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` for color assignment, and SVG rendering for all graphical elements. Data is loaded from a CSV file, and the right-side legends clarify both the calorie size scale and brand color coding.

Rravularasesh3102@gmail.com
89% match
Loading thumbnail…

Fork of Activity6_Question 4

This bubble chart compares beverage manufacturers across glucose levels (x-axis) and ratings (y-axis), with bubble size encoding calorie content and color distinguishing seven brand groups. The chart includes interactive tooltips on hover, displaying calorie and glucose values for each data point. Built with D3 v7, it uses SVG rendering and animation, with scales for positioning, sizing, and color mapping. The visualization also presents separate legends for bubble size (calorie ranges) and categorical colors, drawing from a local CSV data file. Data points are styled with red strokes and 70% opacity for visual clarity.

Kkondaveeti.bhargavi7780@gmail.com
89% match