Bonus ICE

100%

✓ Published0🌍 Public

Last edited Mar 10, 2022

Created on Mar 10, 2022

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Iris parallel coordinate plot

This interactive parallel coordinate plot displays nutritional data for 67 ice cream flavors from a CSV file, using color-coded lines to represent each flavor across four dimensions: trans fat, carbohydrates, sugars, and protein. Users can click and drag axis labels to reorder the dimensions, with adjacent axes swapping positions when crossed. The visualization uses D3 v4 with SVG rendering, employing d3.scaleOrdinal for color mapping, d3.scalePoint for axis positioning, d3.line for path generation, and d3.drag for interactive axis movement. Hovering highlights a flavor by dimming other lines with opacity transitions.

SSumeyya-Eser

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

73% match

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

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

71% match

Loading thumbnail…

D3 Notebook: Playing With Bubble Charts

This example builds an interactive bubble chart from cereal nutritional data, letting viewers toggle between different measurements like calories, protein, fat, and sugar. Each cereal is represented as a circle whose size encodes the selected value, and the SVG bubbles gently animate when the category changes. The visualization is implemented with D3 v4, uses a force simulation to position the bubbles, and is styled with a single blue color at partial opacity, with a light blue outline for each circle. The dataset is loaded from a CSV file and bound to the circles using D3's data join. The chart offers a simple, playful way to explore multivariate nutrition data through direct manipulation.

663anp3ca

71% match

Loading thumbnail…

ICE6

The visualization displays a BMI bar chart comparing height, weight, and BMI values for multiple individuals. It renders two side-by-side SVG bar charts using React and D3 v5. The left chart shows BMI scores with bars colored teal, while the right chart displays height and weight as paired orange and blue bars. Data is loaded from a remote CSV file using `d3.csv`, with scales created via `scaleBand`, `scaleLinear`, and axes drawn with `axisBottom` and `axisLeft`.

KKusumaKumariDama@my.unt.edu

71% match

Loading thumbnail…

Bubble Chart

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.

Mmandadi1999

71% match

Loading thumbnail…

ICE bonus

This interactive 3D bar chart visualizes used car data, comparing numeric attributes like selling price, kilometers driven, max power, and mileage for each car model. It uses the d3-x3d library to render the multi-series bar chart, with data loaded from a CSV file using d3.csv. The visualization is built with D3 v5 and displayed within an HTML page, styled with a simple heading.

RRaajithaSabbineni

70% match