3_ativity_6

100%

✓ Published0🌍 Public

Last edited Oct 25, 2024

Created on Oct 25, 2024

This bubble chart visualizes the correlation between the average price of ice cream, the number of flavor varieties, and calories for a fictional set of ice cream brands. Data is loaded from a remote CSV file, and each bubble’s position encodes price and flavor count, while its size and color represent calorie content and brand, respectively. Built with D3.js v7, the chart includes interactive tooltips on hover and a legend showing calorie-to-bubble-size mapping, with axes, labels, and a title rendered using standard D3 scales and SVG elements.

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…

Bonus ICE

A bubble chart visualizes Baskin-Robbins ice cream flavors by calories on the y-axis and trans fat on the x-axis, with circle size encoding carbohydrate content and color distinguishing individual flavors. Hovering over a bubble displays a tooltip with the flavor name. The visualization uses d3.csv to load data and d3.scaleLinear for positioning and sizing, while d3.scaleOrdinal with d3.interpolateTurbo assigns colors. SVG circles, axis labels, a legend for carbohydrate values, and a color legend are rendered. The code follows the d3-graph-gallery bubble chart template.

Uubl2

83% match

Loading thumbnail…

Activity6_Question4

This interactive bubble chart visualizes chocolate brands by cocoa percentage, sugar content, and popularity index, with bubble size encoding popularity and color representing brand identity. The SVG visualization uses d3.scaleLinear for x/y axes, d3.scaleOrdinal with d3.interpolateTurbo for color mapping, and d3.csv to load the dataset. Hovering over a bubble triggers tooltip HTML showing the brand name. The chart also includes legends for bubble size and brand colors, rendered with d3 selections and animated transitions on mouseover and mouseleave.

DDee

78% match

Loading thumbnail…

Activity6_task4

This bubble chart visualizes the correlation between average sugar, weight, and calories across various food items from a CSV dataset. Each circle’s x-position maps to weight, y-position to sugar, and radius to calorie content, with color distinguishing food type via the d3.scaleOrdinal and schemeCategory10 palette. The chart includes interactive tooltips on mouseover, plus legends for both calorie radius and food categories. Built with D3 v7, it renders as SVG and uses d3.axisBottom and d3.axisLeft for scales.

Yyadlapallisaisathvik@gmail.com

77% match

Loading thumbnail…

Activity6_Question_3

This scatter plot visualizes the relationship between outdoor temperature and ice cream sales, with points colored by an A/B/C rating category. The visualization uses D3 v7 to load CSV data from a GitHub repository, then maps the temperature and sales measurements to a linear scale. Circles are rendered as SVG elements with colors assigned via a switch statement based on the rating grade. Axis labels are styled green in Times New Roman, with rotated temperature text and bottom ice cream sales label, while D3's `axisLeft` and `axisBottom` functions generate the quantitative scales.

Ccherrylmarym@gmail.com

77% match

Loading thumbnail…

Activity 6-task 4

This bubble chart displays the correlation between average sugar, average weight, and calories per serving for various food items. Circles are positioned by weight and sugar on the x and y axes, while the circle radius encodes calorie count, with a legend showing calorie values. A hover tooltip reveals exact food item, weight, sugar, and calorie details. Built with D3 v7, it loads fooditems.csv and uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.schemeCategory10`, and a simple SVG animation on hover to change opacity and stroke.

Ttallapanenisahithi@gmail.com

77% match

Loading thumbnail…

Activity6- question 4

This bubble chart shows the correlation between average volume, average sugar, and calories per serving across 20 drink items using a static dataset loaded via `d3.csv`. Circles are positioned by linear scales for volume (x-axis) and sugar (y-axis), with radius encoding calories through another `d3.scaleLinear`. An ordinal color scale distinguishes drink categories, and hover tooltips display exact values. The SVG includes a calorie legend and category color key, rendered entirely with `d3.select` and `d3.axis` APIs.

Ttallapanenisahithi@gmail.com

77% match

Loading thumbnail…

Activity 6 Question 4

A bubble chart compares beverage manufacturers by plotting glucose levels on the x-axis and ratings on the y-axis, with bubble size encoding calories and color distinguishing brand names. Built with D3 v7, the SVG visualization includes hover tooltips showing calorie and glucose values, plus legends for bubble size and color categories. The chart reads from an external CSV file and animates interactive mouseover transitions.

Jjaswanthreddy2000@gmail.com

76% match

Loading thumbnail…

Activity 6 Question 4

This animated bubble chart compares beverage manufacturers by plotting glucose levels on the x-axis and user ratings on the y-axis, with bubble size encoding calorie content and color encoding the manufacturer. Users can hover over any circle to reveal its exact calorie and glucose values via a tooltip. The visualization is rendered using D3.js version 7, building an SVG scene with `d3.scaleLinear` for axes and bubble radii, and `d3.scaleOrdinal` for color mapping. The chart includes a filled-circle legend for calorie size and a color-coded legend for each brand, pulling data from a local CSV file.

Nnikhilapogula@my.unt.edu

76% match