Bubble Chart in D3

100%

Bubble Chart in D3

✓ Published2🌍 Public

Last edited Feb 23, 2024

Created on Feb 22, 2024

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bubble Chart in D3

This fork of a D3 bubble chart compares breakfast cereals by calories on the x-axis, weight on the y-axis, and rating as the bubble radius. Each circle is colored by manufacturer using the `d3.scaleOrdinal` with `d3.schemeTableau10`. The visualization includes custom legends for bubble size and manufacturer colors, rendered as SVG elements built with `d3.csv` data loading and `d3.axisBottom` and `d3.axisLeft` scales. Data comes from a CSV file hosted on GitHub.

EEunice Tu

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

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

84% match

Loading thumbnail…

Bubble Chart

This bubble chart compares cereal manufacturers by plotting each product’s rating along the x-axis and sodium level along the y-axis, with circle size encoding calories and color distinguishing manufacturers. The data.csv file is loaded via `d3.csv`, and scales including `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeSet1` position and style the marks. The SVG rendering includes axes via `d3.axisBottom` and `d3.axisLeft`, plus custom legends for bubble size and manufacturer color.

SSharankumar02

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

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

81% match

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

81% match

Loading thumbnail…

activity-6-a-4-a

This example visualizes a bubble chart comparing cereal manufacturers, plotting cereal rating against sodium levels, with bubble size representing calorie content and color indicating the manufacturer. The code uses D3v7 to load CSV data, then leverages `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeSet1` for scales and color encoding. It renders bubbles as SVG circles with legends for both size and color, displaying the data from a remote gist CSV file.

SSathishvepuri143@gmail.com

81% match