Skip to main content
SimilarExport ZIP
100%

Bubble chart Presentation

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

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.

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

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.

Ppjdhungana@gmail.com
87% 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
83% match
Loading thumbnail…

Cereals Scatter Plot

This scatter plot visualizes the relationship between sugar content and consumer ratings for various breakfast cereals. Each red circle represents a cereal, positioned by its sugar level on the x-axis and its rating on the y-axis. Hovering over a point enlarges the circle and displays its exact coordinates. The visualization uses D3.js (v5) with SVG rendering, employing `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks, and an ordinal color scale for the legend. Data comes from a local CSV file containing nutritional information.

Ssrrajendran
81% match
Loading thumbnail…

Bubble Chart in D3

This bubble chart visualizes breakfast cereal data, plotting calories on the x-axis against weight on the y-axis. It uses D3 v7 with an SVG rendering approach, loading the dataset from a GitHub gist via `d3.csv`. The chart employs `scaleLinear` for both axes and renders them with `axisBottom` and `axisLeft` on an SVG group element, including a title and subtitle. The code sets explicit margins and dimensions, demonstrating a clean, static scatter-style bubble chart without any interaction or animation.

EEunice Tu
81% 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
80% 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…

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
79% match
Loading thumbnail…

ICE-6 Scatterplot-Calories vs Sugars

This scatterplot visualizes the relationship between calorie and sugar content across a set of cereals. Each black dot represents a single cereal, with its position determined by its caloric value on the x-axis and sugar content on the y-axis. The visualization uses D3.js v7 to load the external CSV dataset, scale the axes linearly, and render the points as SVG circles. The chart includes labeled axes for both variables, with the axis tick marks and labels generated using D3’s axis functions.

Ssreeramyamini@gmail.com
78% match