Skip to main content
SimilarExport ZIP
100%

Bubble chart

✓ Published0🌍 Public
Ppjdhungana@gmail.com
Last edited Jul 25, 2023
Created on Jul 16, 2023
Forked from Hello VizHub

This bubble chart displays the correlation between average potassium, sodium, and carbohydrate levels across different breakfast cereals. Each circle represents a cereal brand, with its position determined by potassium and sodium values, while its radius encodes carbohydrate content and color maps to the cereal name. The visualization includes interactive tooltips that appear on hover, as well as legends for both circle size and color. Implemented with D3 v7, the chart loads data from a CSV file, uses SVG for rendering, and employs d3.scaleLinear, d3.scaleOrdinal, and d3.interpolateTurbo for visual encoding.

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…

Bubble chart Presentation

This interactive bubble chart visualizes the correlation between average sugar, carbohydrate, and calorie content across various breakfast cereals. Each circle’s position is mapped using d3.scaleLinear for the x and y axes, while its radius encodes calorie count through a separate scale. Hovering reveals a tooltip with the cereal’s name, calories, carbs, and sugar. The visualization uses D3 v7 to load CSV data, render SVG circles, and apply the interpolateTurbo color scheme for categorical distinction.

Ppjdhungana@gmail.com
87% match
Loading thumbnail…

Bubble Chart

This bubble chart compares 77 cereals by sodium level and rating, with bubble size representing calorie count and color indicating the manufacturer (from data.csv). The visualization renders as an SVG via D3 v7, using d3.csv to load the data, d3.scaleLinear for x/y position and bubble radius, and d3.scaleOrdinal with d3.schemeSet1 for color encoding. It also includes a custom calorie-size legend and a manufacturer color legend built with circle and text elements.

Ssrikkanth05
81% match
Loading thumbnail…

Visualization

This interactive scatterplot visualizes nutritional data for 77 breakfast cereals from a CSV file, plotting calories against potassium while encoding protein in the dot area and manufacturer with color. Users can zoom and pan through the d3.behavior.zoom interface, and a button click switches the x-axis to carbohydrates with a transition. Hovering reveals tooltips via d3-tip. The SVG rendering uses d3.scale.linear for axes and circle elements with dynamic radius calculations based on protein values.

AAndresAnayaIsaza
80% match
Loading thumbnail…

Bubble Chart

This bubble chart compares cereal manufacturers by plotting each cereal’s rating on the x-axis against its sodium level on the y-axis. Bubble diameter encodes calorie count, while color distinguishes the seven manufacturers, with legends for both size and color. The visualization loads data from a CSV file and renders as SVG using D3 v7, employing `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `d3.schemeSet1` for colors, and `d3.axisBottom` and `d3.axisLeft` for the axes.

Rrushithareddyy
80% match
Loading thumbnail…

Cereal Bubble Chart in D3

This bubble chart compares breakfast cereals by plotting calories on the x-axis, weight on the y-axis, and using bubble radius to represent ratings. Color encodes the manufacturer, with a legend showing both color categories and rating sizes. The visualization loads CSV data via `d3.csv`, renders SVG circles using `d3.scaleLinear` for axes and bubble size, and applies `d3.scaleOrdinal` with `d3.schemeTableau10` for manufacturer colors. The dataset contains nutritional information for 80 cereals from seven manufacturers.

EEunice Tu
80% match
Loading thumbnail…

Bubble Chart

This bubble chart compares cereal products by manufacturer, plotting sodium levels on the x-axis and cereal rating on the y-axis, with bubble size encoding calorie content and color distinguishing manufacturers via a d3.scaleOrdinal and the d3.schemeSet1 color palette. The visualization renders as an SVG using D3 v7, loading data from a CSV file and including custom legends for both bubble size and manufacturer color. Axes are generated with d3.axisBottom and d3.axisLeft, and the chart includes labeled titles for clarity.

Aanith462@gmail.com
79% match
Loading thumbnail…

Visualization

This zoomable scatterplot visualizes nutritional data for 77 breakfast cereals from a CSV file, encoding each cereal as a circle positioned by calories and protein, with size reflecting sodium content. The SVG-based chart uses d3.v3 and animates smoothly on zoom, letting viewers pan and scale to explore the distribution of cereal brands by manufacturer. Built as a D3.js example, it adapts zoom behavior from earlier scatterplot blocks, rendering the data as an interactive, animated graphic.

GGerardoFurtado
79% match
Loading thumbnail…

Bubble Chart

This bubble chart compares cereal manufacturers by plotting each product’s sodium level on the x-axis, rating on the y-axis, and calories as the bubble radius. The color of each bubble encodes the manufacturer. The visualization includes legends for both color and bubble size. It uses D3.js v7 with SVG rendering, reading data from a local CSV file. Key APIs include `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, `d3.schemeSet1`, and the `join` method for data binding.

Ssuryavamsi00024
79% match